Высота просмотра iavascript max после изменения ориентации Android & iOS

Цель:

Чтобы найти максимальную высоту окна просмотра, включая пространство address bar, чтобы мы могли динамически изменять размер минимального тела и подталкивать наш контент вверх.

Проблема:

Мобильные браузеры обрабатывают состояния ориентации по-разному и обновляют свойства DOM при изменении ориентации по-разному.

Обнаружение вращения Android-телефона в браузере с помощью 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>

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 Портрет и пейзаж

iPhone 4 & 4s PortraitiPhone 4 & 4s Landscape

Портрет и альбом для Android

Android PortraitAndroid Landscape

Цель состоит в том, чтобы минимизировать это решение или сделать его лучше.

Ответы

Ответ 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

Вы можете попробовать самозапускающееся закрытие, которое самостоятельно отслеживает изменение ориентации. Что-то вроде этого:

(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

Ожидаемые значения, возвращаемые в 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);
}

(Примечание: этот код не будет проверяться в браузере.)