Android 2.2 2.3 workaround to request device media width

Question

I observed a problem in the native browser of Android 2.2 and 2.3, where device-width request for CSS-media and window.screen.width both report sizes were based on your document and scaling of your web page.

Example: 1: 1 scaling, 960px wide page will display the correct device width (say 320 pixels)

Example: scaling to fit the screen, 960px wide page, incorrectly reports 960px device width

Thus, with the appropriate content, the meta tags in the viewport seem predictable. However, in my case, I cannot rely on the meta tag. Does anyone use a workaround to get a reliable measurement of device width in Android regardless of the viewport meta tag? Other platforms are reporting this correctly on all scales.

Ref: http://code.google.com/p/android/issues/detail?id=11961

Answer 1

window.outerWidth and window.outerHeight always report browser pixels (for example, screen resolution minus UI, usually 480x762 on Galaxy S).

Then you can drop in window.devicePixelRatio to calculate the width of the virtual pixel (320 pixels).