CODEWITHSUNDEEP
htmljquery-mobile
williamsandonz
williamsandonz

Reputation: 16430

iPhone Safari actual resolution

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 480x320, I was expecting 960x480, 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

Upvotes: 3

Views: 7238

Answers (1)

sgliser
sgliser

Reputation: 2071

iPhone 4 has a higher technical resolution, this is true. However, it still reports and scales as though it were 480x320. 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;
    }
}

Upvotes: 7

Related Questions