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

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 mon 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/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?

• javascript
• android
• html
• css
• viewport

• The dialog is a response for a user event like a mouse event? – Prusse Commented Jul 6, 2011 at 20:44
• You could try process the event.pageX/Y and the event.clientX/Y along with some object detection. – Prusse Commented Jul 7, 2011 at 17:27
• Positioning the dialog relative to the click is an option, but I would really like to know how to get the dimensions of the viewport on Android for several reasons – Patrick Fabrizius Commented Jul 8, 2011 at 9:41
• visible view port should be calculated with window.innerWidth/Height and layout viewport with document.documentElement.clientWidth/Height – Ben Sewards Commented Oct 8, 2012 at 15:34

4 Answers 4

This is an old question, but I couldn't find a good answer to this... So after a bunch of work on a bunch of Android devices I think I found a great solution (hack) to the Android issue. Try this:

<!--HTML VERSION -->
<div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div>

OR

// JAVASCRIPT WITH CSS CLASS
var div = document.createElement('div');
div.id = "screenSizeHolder";
div.className = "screen_size_holder";
document.body.insertBefore(div, document.body.firstChild);

$('#screenSizeHolder').html(" ");

Then grab the size of that element

screenHeight = parseInt($('#screenSizeHolder').css('height').replace('px',''));
screenWidth = parseInt($('#screenSizeHolder').css('width').replace('px',''));

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

I've posted a fair bit of my research on related viewport/width issue here, which may help you... Web app on android browser WIDTH issue

I have e up with a slighly different approach that should work on cross platforms

http://www.jqui/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

also answered on this question...

How to set viewport meta for iPhone that handles rotation properly?