元视口和Android的问题答案

【问题标题】：Problem with meta viewport and Android元视口和Android的问题
【发布时间】：2026-02-08 09:55:01
【问题描述】：

我正在尝试基于 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;
}

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

在使用 Google 进行了一些过度研究之后，Android 似乎在 window.innerWidth 和 window.innerHeight 属性方面存在一些问题（参见例如 http://www.quirksmode.org/mobile/viewports2.html ，搜索“测量可见视口”）。

一个选项是使用用户代理来识别 Android 浏览器并始终将对话框定位在 window.pageXOffset / window.pageYOffset，这将始终将它们定位在可见视口中的顶部/左侧。然而，由于许多原因，这是一个糟糕的选择，尤其是缩小时看起来很糟糕。

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

【问题讨论】：

对话框是对鼠标事件等用户事件的响应？
您可以尝试处理 event.pageX/Y 和 event.clientX/Y 以及一些对象检测。
相对于点击定位对话框是一个选项，但我真的很想知道如何在 Android 上获取视口的尺寸，原因有几个
可见视口应使用 window.innerWidth/Height 计算，布局视口应使用 document.documentElement.clientWidth/Height 计算

标签： javascript android html css viewport

【解决方案1】：

这是一个老问题，但我找不到一个好的答案......所以在一堆 Android 设备上进行了大量工作后，我认为我找到了一个很好的解决方案（hack）来解决 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("&nbsp;");

然后获取该元素的大小

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

@ShaunLuttin 在哪些设备/版本上？

【解决方案3】：

我在这里发布了一些关于相关视口/宽度问题的研究，这可能会对您有所帮助...Web app on android browser WIDTH issue

【讨论】：

【解决方案4】：

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

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

也回答了这个问题...

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

【讨论】：