meta视口和Android的问题

我试图使基于JQuery的通用javascript对话框类创建div-弹出框集中在屏幕上。在所有常见的浏览器中实现这一点是很简单的。

在移动平台上，出现了视口问题;可见视口(即当前站点的"查看窗口"，无论是否放大)和布局视口(底层页面的尺寸，或者换句话说，CSS视口)之间的差异。

对于Iphone，我已经能够使用DOM属性窗口。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的窗口似乎有一些问题。innerWidth和window。innerHeight属性(参见http://www.quirksmode.org/mobile/viewports2.html，搜索"测量可见视口")。

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

有没有人知道一个方法来计算Android上的可视视窗?或者有人找到了解决这个问题的方法吗?

这是一个老问题，但我找不到一个好的答案…所以在针对Android设备进行了大量工作后，我认为我找到了一个解决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',''));

答案似乎是您必须将视口宽度设置为device-width。它似乎在我测试过的所有Android版本(2.1、2.2和2.3)中都能工作。

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

我在这里发布了我对相关视口/宽度问题的研究，这可能会对你有所帮助…Web应用程序在android浏览器的宽度问题

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

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

也回答了这个问题…

如何设置viewport meta为iPhone处理旋转正确?

相关内容

最新更新

热门标签：