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's stock browser, but I'm also testing with other browsers on Android.

I've tried with screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth, and jQuery's $(window).width().

Mobile Safari (from ios 3.1.3(7E18), original iPod touch) shows useful values, but the stock Android browser (Android 2.3.7) doesn't.

Ideally, I think that screen.width should show the actual pixel resolution of the screen: 320px on the iPod Touch and 480px on the Samsung Galaxy S2. Based on what I've been reading, one of the other numbers should show the width of the layout viewport which should be 980px on the iTouch and 800px on the Samsung Galaxy S2. .
.

Code

<body>
<h1>screen.width: <span id="screen_width"></span></h1>
<h1>window.innerwidth: <span id="window_innerwidth"></span></h1>
<h1>clientWidth: <span id="clientwidth"></span></h1>
<h1>jQuery width: <span id="jquery_width"></span></h1>
</body>

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var swidth = screen.width;
        var wiwidth = window.innerWidth;
        var cwidth = document.getElementsByTagName("body")[0].clientWidth;
        var jwidth = $(window).width();
        document.getElementById("screen_width").innerHTML = swidth;
        document.getElementById("window_innerwidth").innerHTML = wiwidth;
        document.getElementById("clientwidth").innerHTML = cwidth;
        document.getElementById("jquery_width").innerHTML = jwidth;
    }
</script>

.
.

Results

iOS Safari:
screen.width: 320
window.innerwidth: 980
clientWidth: 964
jQuery width: 980

Android Browser:
screen.width: 800
window.innerWidth: 800
clientWidth: 784
jQuery width: 800

Firefox Mobile (a.k.a. Fennec):
screen.width: 480
window.innerwidth: 980
clientWidth: 964
jQuery width: 980

The Safari results are certainly useable, but not the Android Browser's results.

It's ironic that the Firefox mobile results are accurate. Although it provides a nice browsing experience from a user perspective, it's not a big enough target for mobile devices and there are many other things that don't work well on this browser.

Community · Accepted Answer · 2017-05-23 12:16:18Z

4

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.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 12, 2012 at 19:26

Trott

70.6k27 gold badges183 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter-Paul van Gemerden · Accepted Answer · 2011-12-30 09:25:02Z

3

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).

answered Dec 30, 2011 at 9:25

Peter-Paul van Gemerden

7,02933 silver badges37 bronze badges

1 Comment

user166560 Over a year ago

I want users be able to scale in or out, so I wouldn't want to use minimum or maximum scale. If I used initial scale, that would probably allow a page to fit nicely on the mobile browser. I'll experiment with that and different content block widths. Right now I'm just trying to figure out how much I can tell about a mobile browser without resorting to UA sniffing.

BoltClock · Accepted Answer · 2012-02-20 14:57:29Z

2

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...

edited Feb 20, 2012 at 14:57

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Dec 31, 2011 at 9:53

copenndthagen

51.1k106 gold badges316 silver badges494 bronze badges

Collectives™ on Stack Overflow

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

Code

Results

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

Results

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related