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

Цель:

Чтобы найти максимальную высоту address bar просмотра устройства, включая пространство 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 .
  • Delay window.setTimeout(function() {}, time) необходимо использовать, чтобы дать DOM-элементам возможность обновиться после изменения ориентации.
  • window.outerHeight не обновляется при изменении ориентации для устройств iOS. Использование screen.availHeight в качестве 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 ПортретIPhone 4 и 4s Пейзаж


Android-портрет и пейзаж

Android-портретAndroid Пейзаж


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

Solutions Collecting From Web of "Высота просмотра в javascript max после изменения ориентации Android & iOS"

Это простое решение, которое добавит ширину и высоту браузера к телу документа при загрузке и изменении размера окна.

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

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

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

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

 (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 находится здесь, и вы можете протестировать его, изменив размер браузера, чтобы имитировать изменение мобильного браузера, а затем вы можете адаптировать код для обработки вашего действия.