Stylesheet does not work in mobile correctly

Question

I've got a stylesheet for mobile devices with this code:

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

but, it doesn't work on my iphone 3gs. This stylesheet works fine in browser when I resize it.

If I set "max-width" value to a bigger number of px, for example 1000px, then it works fine. Why is it?

Answer 1

Make sure you have viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Most of the mobile browsers renders the content as a normal web page using a viewport width of 980px. They then squeeze the rendered page to fit inside the actual viewport of the browser.

This is why your media query with 320px does not work but 1000px works.