目标：
查找设备的最大视口高度，包括设备的空间address bar这样我们就可以动态调整 min-body 的大小并将内容向上推。
问题：
移动浏览器处理方向状态的方式不同，方向变化时更新 DOM 属性的方式也不同。
使用 JavaScript 检测浏览器中 Android 手机的旋转 https://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
使用安卓手机，screen.width or 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 |
因此，很明显，要找到最大视口高度，无论方向如何，使用单个函数返回设备的最大高度在一系列设备上永远不会保持不变。
我发现的其他问题并不能让这两者发挥得很好：
- The
window.devicePixelRatio属性可能返回不一致的高度
当除以window.outerHeight.
- Delay
window.setTimeout(function() {}, time)需要用于为 DOM 元素提供在方向更改后更新的机会。
-
window.outerHeight未更新 iOS 设备的方向更改。使用screen.availHeight作为后备，包括底部导航栏作为总高度。
- Using a
#header, #content, #footer结构迫使您动态地重新计算#content{min-height}推动#footer下降时body是动态更新的。
一个办法：
首先我们看一下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>
http://iosjs.com/ http://iosjs.com/
然后检测设备是否支持方向更改并使用调整大小作为后备：
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 纵向和横向
这里的目标是缩小这个解决方案或使其变得更好。
