css max-device-width 800 not matching for android phone

Question

I'm making a site that should look different on mobiles, than how it looks on desktops. I'm testing it on a nexus-s - android 2.3 if that is relevant. I've set the viewport meta tag to device-width.

In the CSS I've added a @media all and (max-device-width: 800px) rule that has all the mobile specific styles. But none of that is being applied. I've made all of it !important and put it in as the last block in the css file, but still it's not working.

Anyone experiences something like this?

Answer 1

I have a mobile screen width test page for checking various screen resolutions on mobile devices. On my HTC Desire the width rule matches 800px, if I specify an initial-scale of 0.67 in the viewport meta.

If I set the width to device-width with an initial-scale of 1.0, the screen comes up as 533 pixels in the CSS rule.

Check it out on your phone, and see if it helps with your page.

Answer 2

Did you put this in the header:

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