要查找设备的最大视口高度,包括address bar
的空间,以便我们可以动态调整min-body的大小并推送我们的内容。
移动浏览器以不同方式处理方向状态,并以不同方式更新方向更改的DOM属性。
Detect rotation of Android phone in the browser with JavaScript
使用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
是动态更新。首先让我们来看看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&amp; 4s Portrait&amp;景观
Android Portrait&amp;景观
答案 0 :(得分:1)
这是一个简单的解决方案,可以在加载和调整窗口大小时将浏览器宽度和高度附加到文档正文。
jQuery.event.add(window, "load", resize);
jQuery.event.add(window, "resize", resize);
function resize()
{
var h = jQuery(window).height();
var w = jQuery(window).width();
jQuery("body").css({"width": w, "height": h});
}
答案 1 :(得分:0)
你可以尝试一个自我调用的闭包来监视方向的变化。像这样:
(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是here ,您可以通过更改浏览器的大小来模拟移动浏览器的更改来测试它,然后您可以调整代码来处理您的操作。
答案 2 :(得分:0)
iOS模拟器中返回的预期值。我目前无法测试Android。
var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.onload = updateOrientation();
window.addEventListener(orientationEvent, function() {
updateOrientation();
}, false);
function updateOrientation(){
switch(window.orientation){
case 0:
alert(window.outerHeight); // Returns '356' with browser chrome
break;
case -90:
alert('Landscape right');
break;
case 90:
alert(window.outerHeight); // Returns '208' w browser chrome
break;
case 180:
//alert('Portrait view - upside down');
break;
}
var orientation = (window.orientation);
}
(注意:此代码不会在浏览器中测试。)