Question

I’ve JUST gotten a bit confused.

I’m using Jquery mobile and:

<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no' name='viewport'>

I outputted

alert(Data.$activePage.find('div[data-role=content]').width());

and using my iPhone 4 I got 480×320, I was expecting 960×480, as per: http://www.iphoneresolution.com/

Could anyone explain to me what is going on here? I need to make sure my beast looks good in iPhone 3,4, ipad safari and was expecting they had diff resolutions

Answer 1

iPhone 4 has a higher technical resolution, this is true. However, it still reports and scales as though it were 480×320. Just pretend that it’s the same as your iPhone 3 for interface purposes. The trick to dealing with with the higher resolution is that your will need to use higher resolution images for them to look as crisp as possible. For instance, if you have a div with an image background, on the iphone 4 you’d want to use an image with a higher resolution in your CSS.

For Example:

.logo-large{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    background-position:0 0;
    position:relative;
    top:0;
    left:0;
    width:290px;
    height:65px; 
}

/* HD / Retina -----------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {
    .logo-large{
        background-image:url(../images/logoHD.png);
        background-size:290px 65px;
    }
}