Android browser reporting the wrong screen size?

Question

I am developing a mobile website, and I've come across an interesting issue.

I'm testing on my desktop, as well as on my Motorola Droid (Android 2.2). I have media queries set up to load 3 different stylesheets (320px wide, 480px wide, and 640px wide). I noticed that my Droid is loading the 320px stylesheet despite having a 480x854px screen. I set up a little JS to find out what the screen width is, and it's reporting 320px.

Does the Android browser run in MDPI on HDPI screens? It's scaling the 320px properly to fill the screen, but I'm a little confused why this is happening.

Also, I do have <meta name="viewport" content="width=device-width"> on my page, so that is not the issue.

Answer 1

Many OEMs have chosen to set their default browser viewport dimensions based on those of the iPhone (or similar resolutions) despite having an altogether different resolution. Apple had a similar problem with the release of the 'retina display' on the iPhone 4 where the spec sheet states 640px across, but screen.width will return 320px when is set.

As @omermuhammed mentioned base your logic on screen.width, CSS @media queries AND/OR device detection using WURFL or DeviceAtlas.

The following article may also be of interest in helping to clarify the issue:

A pixel is not a pixel is not a pixel by @ppk http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html