Question

I am trying to define different stylesheets for iphone 3 and iphone 4 this way

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="all and (max-device-width: 320px)" href="iphone3.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px)" href="iphone4.css" />

and both iphone3.css and iphone4.css have a body{display:none;} to test that they are working but in my iphone4 I still see the webiste,

what am I missing?

thanks!

Answer 1

This will target both iPhone 3 and 4:

@media only screen and (max-device-width: 480px){
    body{background:red;}
}

or

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone3.css" />

You can use this query to then override the previous styles and target only iPhone 4:

@media only screen and (-webkit-min-device-pixel-ratio: 2){
    body{background:blue;}
}

or

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css" />