元视口和 Android 的问题

Question

我正在尝试基于 JQuery 创建一个通用的 javascript 对话框类，以创建以屏幕为中心的 div 弹出窗口。 在所有常见的浏览器中实现这一点很简单。

对于移动平台，出现了视口的问题； 可见视口（这是您当前看到的站点的“查看窗口”，放大与否）和布局视口（底层页面的尺寸，或者换句话说，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;
}

然后我 position 我的对话框分别设置为左/上为 x 和 y。 这适用于大多数浏览器甚至 Iphone，但它不适用于 Android 平台。

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可见视口”）。

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. 然而，由于许多原因，这是一个糟糕的选择，尤其是缩小时看起来很糟糕。

有谁知道计算 Android 上可见视口的方法？ 或者有没有人找到解决方法？

Answer 1

这是一个老问题，但我找不到一个好的答案……所以在对一堆 Android 设备进行大量工作之后，我想我找到了 Android 问题的一个很好的解决方案（hack）。 尝试这个：

<!--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',''));

Answer 2

我在这里发布了一些关于相关视口/宽度问题的研究，这可能会对您有所帮助... Web 应用程序在 android 浏览器宽度问题上

Answer 3

我想出了一个稍微不同的方法，应该可以在跨平台上工作

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

也回答了这个问题...

如何为 iPhone 设置正确处理旋转的视口元数据？

Answer 4

答案似乎是您必须将视口宽度设置为设备宽度。 它似乎适用于我测试过的所有 Android 版本（2.1、2.2 和 2.3）。

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