Question

I’m trying to make a generic javascript dialog-class based on JQuery to create div-popups centered on the screen. Achieving this in all the common browsers was plain vanilla.

For mobile platforms, the issue of the viewport arises; the difference of the visible viewport (which is your current “viewing window” of the site as you see it, zoomed in or not) and the layout viewport (the dimensions of the underlying page, or in other words, the CSS viewport).

For Iphone, I have been able to use the DOM property window.innerWidth and window.innerHeight to adjust centering for the scaling, and pageXOffset / pageYOffset to adjust for panning, with:

// Get dialog width/height
var dx = $("#dialog").width(); 
var dy = $("#dialog").height();

// Get window (layout viewport) width/height
var winW = $(window).width();
var winH = $(window).height();

if (window.innerWidth!=winW) {
    // Zoomed in or users browser window width is smaller than layout width
    var x = window.pageXOffset+(window.innerWidth-dx)/2;
} else {
    // Not zoomed in
    var x = window.pageXOffset+(winW-dx)/2;
}

if (window.innerHeight!=winH) {
    // Zoomed in or users browser window height is smaller than layout height
    var y = window.pageYOffset+(window.innerHeight-dy)/2;
} else {
    // Not zoomed in
    var y = window.pageYOffset+(winH-dy)/2;
}

I then position my dialog by setting it’s left/top to x and y respectively. This works well on most browsers and even the Iphone, it does however not work on Android platforms.

After doing some excessive research using Google, it seems that Android has quite some issues with the window.innerWidth and window.innerHeight properties (see f eg http://www.quirksmode.org/mobile/viewports2.html , search for “Measuring the visible viewport”).

An option would be to use the useragent in order to identify Android browsers and always position the dialog at window.pageXOffset / window.pageYOffset, which would always position them top/left in the visible viewport. However, this is a bad option for many reasons, not least that it looks bad when zoomed-out.

Does anyone know of a method to calculate the visible viewport on Android? Or has anyone found a workaround for this?

Answer 1

The answer seems to be that you have to set the viewport width to device-width. It seems to work in all the Android versions I have tested (2.1, 2.2 and 2.3).

<meta name="viewport" content="width=device-width">