与元视和Android问题 [英] Problem with meta viewport and Android

问题描述

我努力使基于jQuery来创建分区，弹出窗口在屏幕中央一个通用的JavaScript对话框级。实现这一点的所有常见的浏览器是普通的香草。

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 common browsers was plain vanilla.

有关移动平台，视口的问题产生;可见视口的差别（这是网站的您当前的观察窗因为你看到它，放大与否）和布局视口（底层页面的尺寸，或者换句话说，CSS的视口）。

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).

有关iPhone，我已经能够使用DOM属性window.innerWidth和window.innerHeight调整为中心的缩放和pageXOffset / pageYOffset调整为平移，有：

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;
}

我然后通过它的左/前向X和Y分别设置位置我对话。这种运作良好，大多数浏览器，甚至iPhone，但它确实没有在Android平台上工作。

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.

做使用谷歌的一些过分的研究后，似乎Android有与window.innerWidth和window.innerHeight性能颇有些问题（请参见第F如<一个href="http://www.quirksmode.org/mobile/viewports2.html">http://www.quirksmode.org/mobile/viewports2.html搜索测量可见视）。

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 the visible viewport").

这是选项是使用用户代理，以便确定机器人的浏览器和始终定位在window.pageXOffset / window.pageYOffset对话框，这将始终在可见视顶/左定位。然而，这是个不错的选择的原因有很多，并非最不重要的，它看起来不好当缩小的。

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.

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

Does anyone know of a method to calculate the visible viewport on Android? Or has anyone found a workaround for this?

推荐答案

答案似乎是，你必须设置视口宽度为设备宽度。这似乎在所有的Andr​​oid版本，我已经测试（2.1,2.2和2.3）的工作。

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

这篇关于与元视和Android问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！