Creating a versatile JavaScript dialog class is my current project using JQuery to generate centered div-popups on the screen. So far, implementation across common browsers has been straightforward.
The challenge arises when dealing with mobile platforms due to the discrepancies between the visible viewport (the user's current "viewing window" of the site) and the layout viewport (the CSS viewport representing the underlying page dimensions).
On iPhones, I have managed to address this issue by utilizing DOM properties such as window.innerWidth, window.innerHeight, pageXOffset, and pageYOffset to adjust centering based on scaling and panning.
// Calculating dialog width/height
var dx = $("#dialog").width();
var dy = $("#dialog").height();
// Determining window (layout viewport) width/height
var winW = $(window).width();
var winH = $(window).height();
if (window.innerWidth != winW) {
// Handling zoomed-in or narrow browser windows
var x = window.pageXOffset + (window.innerWidth - dx)/2;
} else {
// Dealing with normal view
var x = window.pageXOffset + (winW - dx)/2;
}
if (window.innerHeight != winH) {
// Adjusting for zoom or limited height
var y = window.pageYOffset + (window.innerHeight - dy)/2;
} else {
// Centering in standard view
var y = window.pageYOffset + (winH - dy)/2;
}
This positioning technique works effectively on most browsers including iPhones, but unfortunately, it fails on Android devices.
After extensive research using Google, it appears that Android exhibits challenges with the window.innerWidth and window.innerHeight properties (refer to http://www.quirksmode.org/mobile/viewports2.html, search for "Measuring the visible viewport").
An alternative approach could involve detecting Android browsers using the user-agent and consistently positioning the dialog at window.pageXOffset / window.pageYOffset. However, this solution is not ideal for various reasons, particularly the unattractive appearance when zoomed-out.
If anyone has insights on calculating the visible viewport on Android or has discovered a workaround for this issue, I would greatly appreciate your input.