Question

I was able to format a site properly for devices using an online resonsive design tester and the css declaration, for example, @media only screen and (max-width: 480px) {, but when testing the site on an actual iphone these css declarations are not being computed by the browser.

I have also tried max-device-width and have set the initial scale to <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>. I have also tried the previous declaration without the initial scale setting.

I also have tried: @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

Also: only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {

None of this has worked to target the iphone yet. What am I missing to successfully target an iphone 3/4?

Answer 1

I have successfully been able to target iphone and devices using the css declaration:

@media all and (max-width: 480px)  {
    /* put iphone css formatting here */  
}

for example. Thanks for the contributions.