logo标签列表

meta viewport与Android存在问题

javascriptandroidhtmlcssviewport
8

我正在尝试基于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上的可见视口吗？还是有人找到了解决此问题的方法？
对话框是对用户事件的响应，例如鼠标事件？ - Prusse
你可以尝试处理event.pageX/Y和event.clientX/Y，再结合一些对象检测。 - Prusse
将对话框相对于点击位置进行定位是一个选择，但出于几个原因，我真的很想知道如何获取Android视口的尺寸。 - Patrick Fabrizius
可见视口应使用window.innerWidth/Height计算，布局视口应使用document.documentElement.clientWidth/Height计算。 - Ben Sewards
4个回答
4

这是一个老问题，但我找不到一个好的答案...所以在多个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',''));
1

答案似乎是你必须将视口宽度设置为设备宽度。在我测试过的所有Android版本中（2.1、2.2和2.3），它似乎都有效。

<meta name="viewport" content="width=device-width">
@ShaunLuttin 在哪些设备/版本上？ - Patrick Fabrizius
1
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接