Retina image test

[robertocarroll]

Added an image test for retina screens. Need to test it. Related to #11

http://robertocarroll.com/barjeel-app-public/retina-test/

[robertocarroll]

Here's the image test on a retina iPad:

• r indicates the retina image is being served.
• on a normal device the width is 100% and the max-width is 520px so the image won't distort.
• on a retina device the width is 100% and the max-width is 1020px so the image won't distort.

    .image {
                text-align: center;
            }

            .inner-image {
                width: 100%;
                max-width: 520px;

                @media
                    only screen and (-webkit-min-device-pixel-ratio: 2),
                    only screen and (   min--moz-device-pixel-ratio: 2),
                    only screen and (     -o-min-device-pixel-ratio: 2/1),
                    only screen and (        min-device-pixel-ratio: 2),
                    only screen and (                min-resolution: 192dpi),
                    only screen and (                min-resolution: 2dppx) { 

                      max-width: 1020px;

                    }   
            }

[robertocarroll]

I've asked a few people here and they say the image looks sharp. The only issue is the width, i.e. there's significant white space down the sides, but I think that's fine in that the app is supposed to "work" on tablets but is really for smaller devices. Optimising for tablets would be a whole new issue and massive extra work.

[robertocarroll]

I've set the connect images to behave in the same way as outlined above. On smaller devices that will mean that the image fills the width and perhaps won't be entirely visible (depending on the orientation of the device and the shape of the image). Let me know what you think.

[robertocarroll]

Closing this issue as the retina test result seemed satisfactory. We can open a new issue about the image width/height if necessary.