Android devices don’t scale html sites when orientation changes

I have a html page optimized for portrait view on different devices. Normally the page should automatically scale to device width when switching to landscape mode with this meta tag:

But nothing happens on orientation change. There is a ugly white area on the right.

My Solution was doing what the android browser should do in first place:

First check the screen resolution (width) and then zoom the site by JavaScript code. I mostly build my projects with JQuery so I used some of its functions.

Check width of screen:

newWidth = $(window).width();

You can also use native Javascript (DOM) functions to get the width avoiding JQuery. Something like window.width or innerwidth. Don’t know by heart.

Calculate the zoom-level by dividing the actual width of the screen with your page size:

zoomlevel = newWidth/defaultWidth;

Then adjust the zoom level of the screen:

document.getElementById("wrapper").style.zoom = zoomlevel;
document.getElementById("wrapper").style.MozTransform = 'scale('+zoomlevel+')';

“wrapper” of course is a div around the whole page. The MozTransform isn’t needed if you want to support native browsers only and makes your page look a bit odd, when testing in Firefox.

Call this code when the browser window resizes:

$(window).resize(function() { CODE });

Natively I guess you can use an onResize event.

This works fine in Andoid-Browser, Mobile Safari and on BlackBerry devices with OS 6+. Couldn’t test it on a Windows mobile yet.

As I mentioned obove in the end this is just, what I expected the mobile browsers would do anyway, but didn’t do, besides Safari of course.

This page is also available in: German

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>