CODEWITHSUNDEEP
iphonecssmobile-safari
AppleTattooGuy
AppleTattooGuy

Reputation: 1175

iPhone media query not directing to mobile stylesheet

I am testing a mobile version of my site and have set up a new mobile.css file and am using the following code to redirect to it. (style.css being my main 'desktop' css)

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

        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/style.css" media="screen" />

I am testing this on an iPhone 5 and it simply isn't showing the mobile version of the CSS I have done things like change background colour etc. to test that its working and it just shows the regular version.

Thank you in advance for your help

Upvotes: 1

Views: 816

Answers (1)

axel.michel
axel.michel

Reputation: 5764

Your media query is referencing iPhone4 not iPhone5. You could use device-aspect-ratio:

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Or in case you want to combinate you could do something like this:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

Upvotes: 1

Related Questions