Android Changes Width from 800 to 533 on Refresh

Android’s stock browser is changing the screen size it reports on page load when the <meta name=”viewport” content=”width=device-width”> is present on the web page.

First load of the page in landscape produces a screen size of 800×480 (width x height) and portrait produces 800×1183 (height may be adjusted for address bar). With the meta viewport tag present, reload of the page throws a landscape size of 533×260 (again address bar) and portrait throws 320×473.

Depending on how you have your media queries set, this may cause the page to load one way initially and another way when refreshed or on subsequent page loads.

This anomaly could not be reproduced in Firefox, Opera Mobile, or Opera Mini on the same phone which, in this case, was the HTC Incredible.

This was tested on an HTC Incredible and HTC Thunderbolt both running Android 2.2 in the stock browser. Also, refer to this post where the developer reported seeing the same behavior on the Galaxy Tab.

Test it out by putting the following in the head section on your page and run it in Android:

<script type="text/javascript">
		alert(screen.width+ " x " +  screen.height);

Also, try out the media query tester where you can adjust the media query settings and see how they react on the phone or desktop.

Posted in mobile, Web development. Tags: . Permalink. Both comments and trackbacks are closed.


  1. January 9, 2012 at 9:55 am | Permalink


    I ended up using the following two lines of JavaScript to measure the width. I haven’t had any issues so far.

    var width = this.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth || 0;
    var mobileWidth =(width < 768) ? true : false;

  2. January 7, 2012 at 5:13 pm | Permalink

    Thanks for your test results. I’m seeing this right now on a site I’m building and am hunting for a workaround. Did you find any? Setting our media queries to look at 800px wide devices may catch some small desktops or tablets in the net…