Question

我正在尝试基于JQuery创建一个通用的javascript对话框类来创建以屏幕为中心的div-popups。在所有常见的浏览器中实现这一点纯属普通。

对于移动平台，出现了视口问题;可见视口的差异（您看到的是当前网站的“查看窗口”，是否放大）和布局视口（基础页面的尺寸，或者换句话说，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属性方面存在一些问题（请参阅f http://www.quirksmode.org/mobile/viewports2.html，搜索“测量可见视口”）。

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

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

Answer 1

这是一个老问题，但我无法找到一个好的答案......所以在一堆Android设备上做了大量工作后，我想我找到了一个很棒的解决方案（黑客）到Android问题。试试这个：

<!--HTML VERSION -->
<div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div>

OR

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

Answer 2

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

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

Answer 3

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

Answer 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?

元视口和Android的问题

4 个答案: