ndr​​oid和放大器后的JavaScript最大的视口的高度

ndr​​oid和放大器后的JavaScript最大的视口的高度

关注
发信
关注(28)粉丝(399)

方向变化的Andr​​oid和放大器后的JavaScript最大的视口的高度;的iOS

本文介绍了方向变化的Andr​​oid和放大器后的JavaScript最大的视口的高度;的iOS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目标：

要查找设备的最大视口的高度，包括地址栏这样我们就可以动态地调整分体，推动我们的内容。

的问题：

手机浏览器的方向变化不同的方式处理取向状态不同，更新DOM属性。

Detect Android手机在支持JavaScript的浏览器旋转

使用Android手机， screen.width 或 screen.height 还更新的设备旋转。

  | ===================================== ========================================= |
|设备|事件被解雇|方向| innerWidth | screen.width |
| ================================================= ============================= |
| iPad的2 |调整| 0 | 1024 | 768 |
| （景观）| orientationchange | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ -  + ------------ + -------------- |
| iPad的2 |调整| 90 | 768 | 768 |
| （肖像）| orientationchange | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ -  + ------------ + -------------- |
| iPhone 4 |调整| 0 | 480 | 320 |
| （景观）| orientationchange | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ -  + ------------ + -------------- |
| iPhone 4 |调整| 90 | 320 | 320 |
| （肖像）| orientationchange | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ -  + ------------ + -------------- |
| Droid手机| orientationchange | 90 | 320 | 320 |
| （景观）|调整| 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ -  + ------------ + -------------- |
| Droid手机| orientationchange | 0 | 569 | 569 |
| （肖像）|调整| 0 | 320 | 320 |

正因为如此

显然，找到最大的视口高度无论什么方向，使用单一的函数返回一个设备的最大高度永远是恒定的范围内的装置。

我发现其他的问题，不使这两个发挥好：

  • 的 window.devicePixelRatio 属性可以返回不一致的高度当 window.outerHeight 分裂。
  • 延迟 window.setTimeout（函数（）{}，时间）需要被用来给DOM元素机会的方向改变后更新。
  • window.outerHeight 未更新的iOS设备方向的变化。使用 screen.availHeight 作为后备包括底部的导航栏的总高度。
  • 使用的#header ，＃内容， #footer 结构迫使你动态地重新计算＃内容{最小高度} 推 #footer 下来的时候体是dyamically更新。

一个解决方法：

首先，让我们来看看DIV结构： 

 ＆LT;风格＆GT;
＃头，＃内容＃页脚{宽度：100％;}
＆LT; /风格＆GT;

＆LT;身体GT;
＆LT; D​​IV ID =头＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =内容＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =页脚＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;

我们要prevent设备结垢自己的： 

 ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1.0，最小规模= 1.0，最大规模= 1.0，用户可升级=没有/＆GT;

我们需要帮助，必须返回一个最大的视口高度和隐藏地址栏为iOS的能力： 

 ＆LT;脚本SRC =iOS.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;

http://iosjs.com/

，然后检测，如果设备支持的方向变化，调整使用作为后备： 

  VAR的iOS =（？navigator.userAgent.match（/（新iPad | iPhone | iPod的）/ I）真：假）;
VAR机器人=（navigator.userAgent.match（/安卓/ I）真：假的？）;
VAR supportsOrientationChange窗口=onorientationchange;
VAR orientationEvent = supportsOrientationChange？ orientationchange：调整大小;

兽的肚子： 

 函数updateOrientation的（）
{
    VAR方向=（window.orientation）;

    如果（机器人）
    {
        window.setTimeout（函数（）{
            window.scrollTo（0,0）;
            VAR大小= window.outerHeight / window.devicePixelRatio;
            $（'身体'）的css（最小高度，大小+'像素'）;
            。VAR headerHeight = $（'＃头）高度（）;
            。VAR footerHeight = $（'＃页脚）高度（）;
            VAR或contentHeight =大小 - （headerHeight + footerHeight）;
            $（'＃内容），CSS（最小高度，或contentHeight +'像素'）。
            window.scrollTo（0,1）;
        }，200）;
    }

    如果（IOS）
    {
        window.setTimeout（函数（）{
            window.scrollTo（0,0）;
            变种大小= iOS_getViewportSize（）;
            。VAR headerHeight = $（'＃头）高度（）;
            。VAR footerHeight = $（'＃页脚）高度（）;
            VAR或contentHeight = size.height  - （headerHeight + footerHeight）;
            $（'＃内容），CSS（最小高度，或contentHeight +'像素'）。
            window.scrollTo（0,1）;
        }，0）;
    }
}

添加事件侦听器的页面加载和方向的事件： 

 如果（IOS）
{
    iOS_addEventListener（窗口，载，iOS_handleWindowLoad）;
    iOS_addEventListener（窗口，orientationchange，iOS_handleOrientationChange）;
    iOS_addEventListener（窗口，调整，iOS_handleReize）;
}
的addEventListener（负荷，函数（）
{
    updateOrientation的（）;
}， 假）;
的addEventListener（orientationEvent，函数（）{
    updateOrientation的（）;
}， 假）;

的证明是在布丁：

iPhone 4和4S肖像和放大器;景观

Android的肖像和放大器;景观

这里的目标是中缩小此溶液或使之更好。

解决方案

这是一个简单的解决方案，将追加的浏览器宽度和高度文档正文负载和窗口大小调整。

  jQuery.event.add（窗口，载，调整）;
jQuery.event.add（窗口，调整，调整）;

  功能调整大小（）
    {
      VAR H =的jQuery（窗口）.height（）;
      变种瓦特= jQuery的（窗口）.WIDTH（）;
      。jQuery的（机构）的CSS（{宽：W，高度：H}）;
    }

The Goal:

To find the max viewport height of a device including the space of the address bar so that we can dynamically resize the min-body and push our content up.

The Problem:

Mobile browsers handle orientation states differently and update DOM properties on orientation change differently.

Detect rotation of Android phone in the browser with javascript

With Android phones, screen.width or screen.height also updates as the device is rotated.

|==============================================================================|
|     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          |

Because of this it is clear that to find the max viewport height no matter what orientation, using a single function to return the max height of a device will never be constant over a range of devices.

Other problems I have discovered that don't make these two play nice:

  • The window.devicePixelRatio property can return inconsistent heightswhen dividing by window.outerHeight.
  • Delay window.setTimeout(function() {}, time) needs to be used to give DOM elements a chance to update after orientation change.
  • window.outerHeight is not updated on orientation changes for iOS devices. Using screen.availHeight as a fallback includes the bottom nav bar as total height.
  • Using a #header, #content, #footer structure forces you to dynamically recalculate the #content{min-height} to push the #footer down when the body is dyamically updated.

A Solution:

First let's take a look at DIV structure:

<style>
#header,#content,#footer{width:100%;}
</style>

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

We want to prevent devices from scaling on their own:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

We need help to have the ability to return a max viewport height and hide address bar for iOS:

<script src="iOS.js" type="text/javascript"></script>

http://iosjs.com/

Then detect if the device supports orientation change and use resize as a fallback:

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

The belly of the beast: 

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

Add event listeners for page load and orientation event:

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

Proof is in the pudding:

iPhone 4 & 4s Portrait & Landscape

Android Portrait & Landscape

The goal here is to minify this solution or make it better.

解决方案

This is a simple solution that will append the browsers width and height to the document body on load and window resize.

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

这篇关于方向变化的Andr​​oid和放大器后的JavaScript最大的视口的高度;的iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 21:30
Powered by LMLPHP ©2024 ndr​​oid和放大器后的JavaScript最大的视口的高度 0.049948