Détecter un changement d'orientation en utilisant javascript

Question

Est-il possible de détecter un changement d'orientation du navigateur sur l'iPad ou Galaxy Tab en utilisant javascript? Je pense que c'est possible en utilisant les requêtes media css.

Answer 1

MISE À JOUR:

Vous pouvez consulter

jQuery mobile orientationchange

ou simple JS un:

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

---

Older réponse

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

Safari sur l'iPad prend en charge la propriété window.orientation, si nécessaire, vous pouvez l'utiliser pour déterminer si l'utilisateur est en mode horizontal ou vertical. Pour rappel de cette fonctionnalité:

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) 

Il y a aussi l'événement orientationChange qui se déclenche sur l'objet de la fenêtre lorsque l'appareil est mis en rotation.

Vous pouvez également utiliser des requêtes de médias CSS pour déterminer si l'iPad est maintenu en position verticale ou horizontale, tels que:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

---

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

<script type="text/javascript"> 
var updateLayout = function() { 
    if (window.innerWidth != currentWidth) { 
    currentWidth = window.innerWidth; 
    var orient = (currentWidth == 320) ? "profile" : "landscape"; 
    document.body.setAttribute("orient", orient); 
    window.scrollTo(0, 1); 
    } 
}; 

iPhone.DomLoad(updateLayout); 
setInterval(updateLayout, 400); 
</script> 

Answer 2

window.orientation est ce que vous cherchez. il y a aussi un événement onOrientationChange fonctionne pour Android, iPhone et, je suis la plupart du temps que, pour l'ipad

Answer 3

Ajouter au @ mplungjan réponse, j'ai trouvé de meilleurs résultats en utilisant le webkit "natif" (je ne sais pas comment l'appeler) événement, 'deviceorientation' .

Dans le Mozilla Developer network ils ont une bonne explication sur la normalisation entre webkit et Gecko qui m'a aidé à résoudre ce problème.

Answer 4

Vous pouvez utiliser l'événement orientationChange comme ceci:

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

Answer 5

Vous pouvez utiliser mediaMatch pour évaluer les requêtes de médias CSS, par exemple

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

incendies de requête média CSS avant le orientationchange. Si vous souhaitez capturer la fin de l'événement (lorsque la rotation est terminée), voir mobile viewport height after orientation change.

Answer 6

Un extrait facile à utiliser:

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

Answer 7

De "Cross-device, cross-browser portrait-landscape detection"

Il s'agit de découvrir si un appareil mobile est en mode portrait ou paysage; Vous n'avez pas besoin de vous préoccuper de son orientation. Pour autant que vous sachiez, si vous tenez votre iPad à l'envers, c'est en mode portrait.

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

90 signifie paysage, 0 signifie portrait, navigateur croisé, appareil croisé. L'événement window.onresize est disponible partout, et il est toujours allumé au bon moment; jamais trop tôt, jamais trop tard. En fait, la taille de l'écran est toujours aussi précise.