Detectar mudança na orientação usando o javascript

É possível detectar a mudança na orientação do navegador no iPad ou Galaxy Tab usando javascript? Eu acho que é possível usar consultas de mídia css.

ATUALIZAR:

Você pode querer dar uma olhada

jQuery mobile orientationchangechange

ou o simples JS:

window.addEventListener("orientationchange", function() { alert(window.orientation); }, false); 

Resposta mais antiga

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

O Safari no iPad suporta a propriedade window.orientation, portanto, se necessário, você pode usá-lo para determinar se o usuário está no modo horizontal ou vertical. Como lembrete desta funcionalidade:

 window.orientation is 0 when being held vertically window.orientation is 90 when rotated 90 degrees to the left (horizontal) window.orientation is -90 when rotated 90 degrees to the right (horizontal) 

Há também o evento orientationchange que é triggersdo no object da janela quando o dispositivo é girado.

Você também pode usar consultas de mídia CSS para determinar se o iPad está sendo mantido na orientação vertical ou horizontal, como:

   

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone–iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags .htm

  

Você pode usar o evento orientationchange assim:

 window.addEventListener('orientationchange', function(){ /* update layout per new orientation */ }); 

window.orientation é o que você está procurando. há também um evento onOrientationChange funciona para android, iphone e, eu tenho quase certeza, para ipad

Adicionando à resposta @mplungjan, encontrei melhores resultados usando o evento “nativo” (não sei como chamar), ” deviceorientation “.

Na rede Mozilla Developer eles têm uma boa explicação sobre como normalizar entre o webkit e o Gecko que me ajudou a resolver este problema.

Você pode usar mediaMatch para avaliar consultas de mídia CSS, por exemplo

 window .matchMedia('(orientation: portrait)') .addListener(function (m) { if (m.matches) { // portrait } else { // landscape } }); 

A consulta de mídia CSS é acionada antes do orientationchange . Se você estiver procurando capturar o final do evento (quando a rotação tiver sido concluída), consulte Altura da janela de visualização móvel após a alteração de orientação .

Um fácil de usar snippet:

 function doOnOrientationChange() { switch(window.orientation) { case -90: case 90: // alert('landscape'); $('#portrait').css({display:'none'}); $('#landscape').css({display:'block'}); break; default: // alert('portrait'); $('#portrait').css({display:'block'}); $('#landscape').css({display:'none'}); break; } } window.addEventListener('orientationchange', doOnOrientationChange); // First launch doOnOrientationChange(); 

De ” Detecção de paisagem em retrato entre dispositivos, entre navegadores ”

Trata-se de descobrir se um dispositivo móvel está no modo retrato ou paisagem; você não precisa se preocupar com sua orientação. Por tudo que você sabe, se você segurar o seu iPad de cabeça para baixo, está no modo retrato.

 $(window).bind("resize", function(){ screenOrientation = ($(window).width() > $(window).height())? 90 : 0; }); 

90 significa paisagem, 0 significa retrato, cross browser, dispositivo cruzado.

O evento window.onresize está disponível em todos os lugares e é sempre acionado no momento certo. Nunca é cedo demais, nunca é tarde demais. Na verdade, o tamanho da canvas é sempre preciso também.

A versão do JavaScript seria isso, corrija-me por favor, se eu estiver errado.

  function getScreenOrientation() { screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0; console.log("screenOrientation = " + screenOrientation); } window.addEventListener("resize", function(event) { getScreenOrientation(); }); getScreenOrientation(); 
    Intereting Posts