我正在尝试基于JQuery创建一个通用的JavaScript对话框类,以创建在屏幕中心的DIV弹出窗口。在所有常见的浏览器中实现这一点非常简单。
对于移动平台,视口(viewport)的问题会出现;可见视口(即您当前“查看窗口”的站点,缩放或未缩放的)与布局视口(底层页面的尺寸,或者换句话说,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;
}
我通过设置对话框的左侧和顶部位置来定位它,这在大多数浏览器甚至iPhone上都很有效,但在Android平台上却不起作用。
经过使用Google进行了大量研究后发现,Android在window.innerWidth和window.innerHeight属性方面存在一些问题(请参见例如http://www.quirksmode.org/mobile/viewports2.html,搜索“测量可见视口”)。
一种选择是使用用户代理来识别Android浏览器,并始终将对话框定位在window.pageXOffset / window.pageYOffset处,这将始终将其置于可见视口的顶部/左侧。然而,出于许多原因,这是一个不好的选择,尤其是在缩小时看起来很糟糕。
有人知道如何计算Android上的可见视口吗?还是有人找到了解决此问题的方法?