方向更改后的javascript最大视口高度&；网间网操作系统目标是：_Javascript_Android_Html_Ios_Mobile

方向更改后的javascript最大视口高度&；网间网操作系统目标是：

javascript android html ios mobile

方向更改后的javascript最大视口高度&；网间网操作系统目标是：,javascript,android,html,ios,mobile,Javascript,Android,Html,Ios,Mobile,查找设备的最大视口高度，包括地址栏的空间，以便动态调整最小主体的大小并向上推送内容问题是：移动浏览器以不同的方式处理方向状态，并在方向更改时以不同的方式更新DOM属性对于Android手机，screen.width或screen.height也会随着设备的旋转而更新 |==============================================================================| | Device | Events Fired

查找设备的最大视口高度，包括地址栏的空间，以便动态调整最小主体的大小并向上推送内容

问题是：移动浏览器以不同的方式处理方向状态，并在方向更改时以不同的方式更新DOM属性

对于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          |

因此，很明显，要查找“最大视口高度”（max viewport height），无论方向如何，使用单个函数返回设备的“最大高度”（max height）在设备范围内都不会保持不变

我发现的其他问题并不能让这两个人玩得很好：

<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" />

<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";

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);

```
window.devicePixelRatio
```
属性可能返回不一致的高度除以
```
window.outerHeight
```
时
需要使用Delay
```
window.setTimeout（function（）{}，time）
```
为DOM元素提供在方向更改后更新的机会
```
window.outerHeight
```
不会在iOS设备的方向更改时更新。使用
```
screen.availHeight
```
作为备用，包括底部导航条作为总高度
使用
```
#页眉
```
，
```
#内容
```
，
```
#页脚
```
结构强制您动态重新计算
```
#内容{min height}
```
，以便在动态更新
```
正文
```
时向下推
```
#页脚
```

解决方案：

<强>首先让我们看一下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" />

<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";

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);

野兽的腹部：

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);
    }
}

为页面加载和定向事件添加事件侦听器：

<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" />

<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";

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);

证据就在布丁里： iPhone4&4s纵向和横向

安卓人像与景观

这里的目标是缩小此解决方案或使其更好。您可以尝试一个自调用闭包，它可以自行监视方向的变化。大概是这样的：

(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); })(); })();

只需将其放入documentready函数。目前，它每秒钟检查一次，但您可以缩短间隔。jsidle是，您可以通过更改浏览器的大小来测试它，以模拟移动浏览器的更改，然后您可以调整代码以处理您的操作。
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); }

（注意：此代码不会在浏览器中进行测试。）
这是一个简单的解决方案，它将在加载时将浏览器的宽度和高度附加到文档正文并调整窗口大小

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}); }

>>请不要建议媒体查询。为什么不呢？完成这项任务的一种（非常粗糙的）方法是使用两个不同方向的CSS文件，并在您认为方向改变时使用javascript检查元素宽度。动态计算高度以支持液体布局跨浏览器。我需要为几个元素“重新计算”高度。媒体查询是在可以使用的地方使用的，这不是其中之一。首先，如果您手动计算高度，则布局不是“液体”。其次，我知道你的问题是计算高度而不是检测变化，对吗？如果是这样的话，那么我的第一个怀疑就是你需要outerHeight财产。@Christian我不会就你认为我的问题与你争论。我告诉你，我的构建确实是流动的，但是有些元素是动态计算的，所以父元素包含的子元素也需要动态计算。户外照明与问题无关。问题在于，方向更改事件不会在mobile safari浏览器中拾取高度/宽度DOM更改。谢谢你的努力。我知道你在这里做什么。尽管如此，使用if
（CurrentOrientation&&CurrentOrientation！==NewOrientation）
不允许用户在任何状态下改变方向后拉动高度。例如，我查看风景时返回230px/我查看肖像时返回450px。你是否可以对此进行修改以支持它？那么这是一个简单的解决方案：返回230和450的函数的名称是什么？我想我要说的是，我需要一个函数在方向改变时返回视口高度。例如，使用iphone，我希望在横向时返回230px，在纵向时返回450px<代码>var h=（window.screen.availHeight/window.devicePixelRatio）；警报（h）请参见编辑，只是用window.screen.availHeight/window.devicePixelRatioI更新了它。很抱歉，这没有正确计算Android或iPhone的最大视口高度。这是“模拟器”还是模拟器？“模拟器”无法正确复制此问题，因此对此我很抱歉。我的Mac电脑附带了“iOS模拟器”。您的iOS模拟器是否使用相同的硬件约束调用mobile safari？很抱歉，模拟器不会像实际设备那样复制这个问题。是的，Mobile Safari。它是Xcode附带的模拟器，“用于构建Mac、iPhone和iPad应用程序的完整开发工具集，包括Xcode IDE、仪器和iOS模拟器”。它没有相同的硬件约束，但它确实能像实际设备一样正确响应媒体查询和其他环境变量。