定向更改Android和iOS后的javascript最大视口高度
[英]javascript max viewport height after orientation change 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
这里的目标是缩小此解决方案或使其更好。
3 个解决方案
解决方案1
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});
}
解决方案2
0 2012-10-01 01:46:09
你可以尝试一个自我调用的闭包来监视方向的变化。 像这样的东西：
(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在这里 ，您可以通过更改浏览器的大小来模拟移动浏览器的更改来测试它，然后您可以调整代码来处理您的操作。
解决方案3
0 2012-10-04 14:11:59
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);
}
（注意：此代码不会在浏览器中测试。）
键盘处于活动状态时，iPad Web应用程序视口高度会随着方向的改变而改变
[英]iPad web app viewport height changes on orientation change when keyboard is active
Javascript按类选择元素，更改其最大高度，然后更改单击的元素的最大高度
[英]Javascript select elements by class, change their max-height and then change clicked element max-height
ios iframe只有在方向从纵向更改为横向后才能展开
[英]ios iframe unscrollable only after orientation change from portrait -> landscape
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.