Question

For my Mobile Web App I am trying to get screen width of the device to fit the views dynamically.

I am really confused why Motorola Atrix Atrix MB860 is reporting a 800px width. When I see the spec of this device its resolution is 540×960. Why in javascript it reports 800px? I used this test page:
http://www.quirksmode.org/m/tests/widthtest.html

I tested the above page on several devices and they all report width correctly apart from Motorola atrix. For instance galaxy s2 reports 480px and nexus 7 reports 1280px

Answer 1

It’s an odd behaviour of Android 2.3. which i found out here: http://tripleodeon.com/2011/12/first-understand-your-screen

Android v2.3, in a regular browser scenario, however, displays even more curious behavior. Its screen.width always starts off as 800 – which is clearly some sort of virtual viewport, rather than the physical screen. But when the document has an XHTML-MP doctype, or a constrained viewport (for any doctype), the value will switch, by the time of the document load event, to be the 320 or 480 you might expect.

window.outerWidth should do the trick or set viewport width to device-width

<meta name="viewport" content="width=device-width, user-scalable=no" />