目标：
找到包括空间在内的设备的最大视口高度，address bar以便我们可以动态调整最小主体的大小并将我们的内容向上推送。
问题：
移动浏览器以不同的方式处理方向状态，并以不同的方式在方向变化时更新 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}推。#footerbody
一个解法：
首先让我们看一下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>
然后检测设备是否支持方向更改并使用调整大小作为后备：
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 纵向和横向
