Media query not working on mobile browser?

I'm currently working on a mobile version of a website开发者_高级运维 which works great in the default browsers like Firefox & Chrome. Base is a fluid layout with a media query for a max width of 440px (@media screen and (max-width: 440px)to target portrait mode.

Font sizes are changing in the default browsers together with some other settings like smaller images and divs etc. However when I test the site on my HTC Android phone with the default browser it only shows the max width 440 style instead of the normal style which is based on a width of 480px.

What could be the problem for this behaviour? The mobile version can be found on httpp://www.seeyouzoeningouda.nl/m

Haven't posted the CSS because I really don't know which part of the code to show you. The css is based on the default HTMl5 boilerplate template (www.html5boilerplate.com)

What mobile devices have u used for testing ?
If they are samsung galaxy s3 or apple iphone 4 then their device resolution has been doubled and hence this might be the cause for media queries not working.

So for I-phone 4 try to double the max-width from 480px to 960px and for samsung galaxy s3 if u double the max-width from 360px to 720px while writing the media query then it might work perfectly fine.

eg.
@media handheld, screen and (max-width: 960px)
@media handheld, screen and (max-width: 720px)

I think this might help you to target portrait mode.

Mobile device are sometimes targeted by @media handheld. Try using @media all instead of screen.