Question

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no;"/>

Works fine on iOS but doesn’t work at all on My Milestone and a Nexus One. The page just stays at it is at 320px width, like it is meant to be in portrait view. Also changing the width or initial scale in the viewport meta tag to a certain value doesn’t have any effect as it should have according to the official android documentation.
I also tried to make a simple page for testing purposes but it didn’t work. The only chance to make the browser changing the scale is to avoid the viewport meta tag completely, but then it seems to scale randomly, mostly to a very small scale.

Here is a very simple test page: click

Maybe someone came across this behavior. I couldn’t find a solution in hours…

Thanks!

Answer 1

During a new Project I made some more research on this topic and found a solution. Its doing what in my opinion Android Browser should do by himself.

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.