Question

I’ve just written some rules in order to display the mobile version of my website on smartphones.

Mobile rules are included at the bottom of the default stylesheet ( http://www.flapane.com/style.css ) using “@media”.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (orientation : landscape) and (min-device-width : 480px) and (max-device-width : 800px), only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1)
 { [CODE]
}

I succesfully tested it on a 480×800 Android device. It works both in landscape and portrait mode. ( https://i.stack.imgur.com/grnJr.png )

However I tested it on a couple of friends’iPhone4, and desktop version is always displayed.

I tried using just

@media only screen and (-webkit-min-device-pixel-ratio : 2)

but nothing changed.

Any hints?
Thanks

Answer 1

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5)

seems to work on iPhone too