定向更改Android和iOS后的javascript最大视口高度
Dan*_*nze 14 html javascript mobile android ios
目标:
要查找设备的最大视口高度,包括空间,address bar以便我们可以动态调整min-body的大小并推送我们的内容.
问题:
移动浏览器以不同方式处理方向状态,并更改方向更改的DOM属性.
使用JavaScript检测浏览器中Android手机的旋转
使用Android手机,screen.width或者screen.height在设备旋转时也进行更新.
|==============================================================================|
| Device | Events Fired | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2 | resize | 0 | 1024 | 768 |
| (to landscape) | orientationchange | 90 | 1024 | 768 |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2 | resize | 90 | 768 | 768 |
| (to portrait) | orientationchange | 0 | 768 | 768 |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4 | resize | 0 | 480 | 320 |
| (to landscape) | orientationchange | 90 | 480 | 320 |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4 | resize | 90 | 320 | 320 |
| (to portrait) | orientationchange | 0 | 320 | 320 |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone | orientationchange | 90 | 320 | 320 |
| (to landscape) | resize | 90 | 569 | 569 |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone | orientationchange | 0 | 569 | 569 |
| (to portrait) | resize | 0 | 320 | 320 |
因此很明显,无论在什么方向上找到最大视口高度,使用单个函数返回设备的最大高度在一系列设备上永远不会是恒定的.
我发现的其他问题不要让这两个问题发挥得淋漓尽致:
window.devicePixelRatio除以时,属性可以返回不一致的高度window.outerHeight.window.setTimeout(function() {}, time)需要使用延迟来为DOM元素提供在方向更改后更新的机会.window.outerHeight没有更新iOS设备的方向更改.使用screen.availHeight作为后备包括底部导航栏为总高度.- 使用
#header,#content,#footer结构迫使你动态地重新计算#content{min-height}推#footer下来当body被dyamically更新.
一个办法:
首先让我们来看看DIV结构:
<style>
#header,#content,#footer{width:100%;}
</style>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
我们希望防止设备自行扩展:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
我们需要帮助才能返回最大视口高度并隐藏iOS地址栏:
<script src="iOS.js" type="text/javascript"></script>
然后检测设备是否支持方向更改并使用resize作为后备:
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
var android = (navigator.userAgent.match(/Android/i) ? true : false);
var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
野兽的肚子:
function updateOrientation()
{
var orientation = (window.orientation);
if(android)
{
window.setTimeout(function() {
window.scrollTo(0,0);
var size = window.outerHeight/window.devicePixelRatio;
$('body').css('min-height', size + 'px');
var headerHeight = $('#header').height();
var footerHeight = $('#footer').height();
var contentHeight = size - (headerHeight+footerHeight);
$('#content').css('min-height', contentHeight + 'px');
window.scrollTo(0,1);
}, 200);
}
if(iOS)
{
window.setTimeout(function(){
window.scrollTo(0,0);
var size = iOS_getViewportSize();
var headerHeight = $('#header').height();
var footerHeight = $('#footer').height();
var contentHeight = size.height - (headerHeight+footerHeight);
$('#content').css('min-height', contentHeight + 'px');
window.scrollTo(0,1);
}, 0);
}
}
为页面加载和方向事件添加事件侦听器:
if(iOS)
{
iOS_addEventListener(window, "load", iOS_handleWindowLoad);
iOS_addEventListener(window, "orientationchange", iOS_handleOrientationChange);
iOS_addEventListener(window, "resize", iOS_handleReize);
}
addEventListener("load", function()
{
updateOrientation();
}, false);
addEventListener(orientationEvent, function() {
updateOrientation();
}, false);
布丁的证据是:
iPhone 4&4s人像与风景
Android Portrait&Landscape
这里的目标是缩小此解决方案或使其更好.
您可以尝试使用自调用闭包来自行监视方向的变化。像这样的东西：
(function () {
var CurrentHeight;
(function CheckForOrientationChange() {
//var NewHeight = window.screen.availHeight / window.devicePixelRatio;
//var NewHeight = $(window).height();
var NewHeight = $('#WidthCheck').width();
if (CurrentHeight && CurrentHeight!== NewHeight ) {
alert(NewHeight); // change here
}
CurrentHeight = NewHeight;
setTimeout(CheckForOrientationChange, 1000);
})();
})();
只需将其放入文档准备功能中即可。目前它每秒检查一次，但您可以缩短该间隔。jsfiddle在这里，您可以通过更改浏览器的大小来模拟移动浏览器的变化来测试它，然后您可以调整代码来处理您的操作。