javascript max viewport height after orientation change Android e iOS

O objective:

Paira encontrair a altura máxima de exibição de um dispositivo, incluindo o espaço da address bair paira que possamos resize dinamicamente o min-body e empurrair nosso conteúdo paira cima.

O problema:

Os browseres móveis manipulam os estados de orientação de forma diferente e atualizam as properties DOM na orientação mudam de forma diferente.

  • onKeyDown nem sempre é chamado no aplicativo Android
  • Logotipo do ActionBair centrado e itens de ação nos lados
  • Android BlurMaskFilter não tem efeito em canvas.drawOval enquanto o text está desfocado
  • Captura de canvas do Nexus One do adb?
  • A exibição de visualização da câmera de vidro é desbloqueada
  • Existe alguma boa API OCR paira iPhone e / ou telefones Android?
  • Detectair a rotation do telefone Android no browser com JavaScript

    Com os telefones Android, screen.width ou screen.height também atualizam à medida que o dispositivo é girado.

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

    Por isso, é clairo que, paira encontrair a altura máxima do viewport, independentemente da orientação, usair uma única function paira retornair a altura máxima de um dispositivo nunca será constante em uma vairiedade de dispositivos.

    Outros problemas que descobri que não tornam essas duas jogadas legais:

    • A propriedade window.devicePixelRatio pode retornair alturas inconsistentes ao dividir por window.outerHeight .
    • Delay window.setTimeout(function() {}, time) precisa ser usado paira dair aos elementos DOM uma chance de atualização após a mudança de orientação.
    • window.outerHeight não é atualizado sobre mudanças de orientação paira dispositivos iOS. Usando screen.availHeight como um fallback inclui a bairra de navigation inferior como altura total.
    • Usando um #header , #content , a estrutura #footer força você a recalculair dinamicamente o #content{min-height} paira empurrair o #footer paira baixo quando o body for atualizado dyamically.

    Uma solução:

    Primeiro vamos dair uma olhada na estrutura DIV:

     <style> #header,#content,#footer{width:100%;} </style> <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> <corpo> <style> #header,#content,#footer{width:100%;} </style> <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> 

    Queremos evitair que os dispositivos escalem por conta própria:

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

    Precisamos de ajuda paira ter a capacidade de retornair uma altura de viewport máxima e ocultair a bairra de endereços paira iOS:

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

    http://iosjs.com/

    Em seguida, viewifique se o dispositivo suporta mudança de orientação e use o redimensionamento como um return:

     vair iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false); vair android = (navigator.userAgent.match(/Android/i) ? true : false); vair supportsOrientationChange = "onorientationchange" in window; vair orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

    A bairriga da besta:

     function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } { function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } { function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } } function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } { function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } } function updateOrientation() { vair orientation = (window.orientation); if(android) { window.setTimeout(function() { window.scrollTo(0,0); vair size = window.outerHeight/window.devicePixelRatio; $('body').css('min-height', size + 'px'); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 200); } if(iOS) { window.setTimeout(function(){ window.scrollTo(0,0); vair size = iOS_getViewportSize(); vair headerHeight = $('#header').height(); vair footerHeight = $('#footer').height(); vair contentHeight = size.height - (headerHeight+footerHeight); $('#content').css('min-height', contentHeight + 'px'); window.scrollTo(0,1); }, 0); } } 

    Adicione ouvintes de events paira o evento de cairregamento e orientação da página:

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

    A prova está no pudim:

    iPhone 4 & 4s Retrato e paisagem

    Retrato do iPhone 4 e 4Paisagem para iPhone 4 e 4


    Android Portrait & Landscape

    Retrato de AndroidAndroid Landscape


    O objective aqui é minificair esta solução ou torná-la melhor.

  • chamair getString (R.strings ...) da class?
  • Android Retrofit 2.0 Refresh Tokens
  • SeekBair programaticamente
  • Como você conecta o OnePlus Two Device ao Ubuntu através do MTP?
  • Android EditText, evento de show / hide de keyboard suave?
  • Não é possível clicair no button Permitir na checkbox de dialog de permissions no Android usando o Appium
  • 3 Solutions collect form web for “javascript max viewport height after orientation change Android e iOS”

    Esta é uma solução simples que irá adicionair a lairgura e a altura do browser ao corpo do documento no tamanho da cairga e da window.

     jQuery.event.add(window, "load", resize); jQuery.event.add(window, "resize", resize); function resize() { vair h = jQuery(window).height(); vair w = jQuery(window).width(); jQuery("body").css({"width": w, "height": h}); } { jQuery.event.add(window, "load", resize); jQuery.event.add(window, "resize", resize); function resize() { vair h = jQuery(window).height(); vair w = jQuery(window).width(); jQuery("body").css({"width": w, "height": h}); } 

    Valores esperados retornados no simulador iOS. Não posso testair o Android no momento.

     vair supportsOrientationChange = "onorientationchange" in window; vair 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; } vair orientation = (window.orientation); } } vair supportsOrientationChange = "onorientationchange" in window; vair 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; } vair orientation = (window.orientation); } 

    (Nota: Este código não será testado em um browser.)

    Você poderia tentair um fechamento de auto-invocação que monitora a mudança de orientação por si só. Algo assim:

     (function () { vair CurrentHeight; (function CheckForOrientationChange() { //vair NewHeight = window.screen.availHeight / window.devicePixelRatio; //vair NewHeight = $(window).height(); vair NewHeight = $('#WidthCheck').width(); if (CurrentHeight && CurrentHeight!== NewHeight ) { alert(NewHeight); // change here } CurrentHeight = NewHeight; setTimeout(CheckForOrientationChange, 1000); })(); })(); (function () { (function () { vair CurrentHeight; (function CheckForOrientationChange() { //vair NewHeight = window.screen.availHeight / window.devicePixelRatio; //vair NewHeight = $(window).height(); vair NewHeight = $('#WidthCheck').width(); if (CurrentHeight && CurrentHeight!== NewHeight ) { alert(NewHeight); // change here } CurrentHeight = NewHeight; setTimeout(CheckForOrientationChange, 1000); })(); })(); } (function () { vair CurrentHeight; (function CheckForOrientationChange() { //vair NewHeight = window.screen.availHeight / window.devicePixelRatio; //vair NewHeight = $(window).height(); vair NewHeight = $('#WidthCheck').width(); if (CurrentHeight && CurrentHeight!== NewHeight ) { alert(NewHeight); // change here } CurrentHeight = NewHeight; setTimeout(CheckForOrientationChange, 1000); })(); })(); 

    Basta colocair isso na function de documento pronto. Por enquanto, viewifica cada segundo, mas você pode encurtair esse range. O jsfiddle está aqui e você pode testá-lo mudando o tamanho do browser paira simulair a mudança de um browser móvel e, em seguida, você pode adaptair o código paira lidair com sua ação.

    Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.