How do I find the virtual viewport/screen width using Javascript?

Question

Is there a consistent way to determine the width of the screen and virtual viewport for mobile devices using Javascript? My target platforms are mobile Safari and Android\'

Answer 1

Another StackOverflow question has this as a workaround:

setTimeout(YourFunction, 200);

And if you want the details, you can read about the bug in the issue tracker. You're experiencing a bug that exists in Android 2.2 and 2.3.

Answer 2

It may help to set the scale of the viewport to 1.0 using this <meta> tag:

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

This solved a similar problem for me when when I was creating a responsive HTML/CSS layout for a mobile app (I was using CSS @media queries).

Answer 3

You can find out the various viewport widths by accessing the following link on the device

http://ipad.atwebpages.com/viewport.html

This would work for both desktop and mobile browsers..

Just to add, viewport is mainly useful for mobile devices only...