元视口和Android的问题
我试图制作一个基于JQuery的通用JavaScript对话框类来创建屏幕上居中的div-popups。 在所有常见的浏览器中实现这一点是普通的香草。
对于移动平台而言，出现了视口问题; 可见视口（这是您当前看到的，放大或缩小的网站的“查看窗口”）和布局视口（底层页面的尺寸，换句话说，CSS视口）之间的差异。
对于Iphone，我已经能够使用DOM属性window.innerWidth和window.innerHeight来调整缩放的居中，pageXOffset / pageYOffset用于调整平移，具体如下：
// 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;
}
然后我通过将它的左/上分别设置为x和y来定位我的对话框。 这适用于大多数浏览器甚至Iphone，但它不适用于Android平台。
在使用Google进行了一些过度研究之后，似乎Android在window.innerWidth和window.innerHeight属性方面存在一些问题（参见http://www.quirksmode.org/mobile/viewports2.html，搜索“Measuring可见的视口“）。
一个选项是使用useragent来识别Android浏览器，并始终将对话框定位在window.pageXOffset / window.pageYOffset，它始终将它们放置在可见视口的顶部/左侧。 然而，这是一个不好的选择，原因很多，尤其是缩小时看起来很糟糕。
有谁知道在Android上计算可见视口的方法吗？ 或者有人找到解决方法吗？
这是一个古老的问题，但我无法找到一个好的答案...因此，在一堆Android设备上进行了大量工作后，我认为我发现了一个针对Android问题的出色解决方案（黑客）。 尝试这个：
<!--HTML VERSION -->
<div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div>
要么
// 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(" ");
然后抓住那个元素的大小
screenHeight = parseInt($('#screenSizeHolder').css('height').replace('px',''));
screenWidth = parseInt($('#screenSizeHolder').css('width').replace('px',''));
我已经发布了一些相关的视口/宽度问题的研究，这可能会帮助你...在Android浏览器上的Web应用程序WIDTH问题
答案似乎是，您必须将视口宽度设置为设备宽度。 它似乎适用于我测试过的所有Android版本（2.1,2.2和2.3）。
<meta name="viewport" content="width=device-width">