Détecter le changement d'orientation à l'aide de javascript

METTRE À JOUR:

Vous voudrez peut-être vérifier

Échange d'orientation mobile jQuery

Ou la JS simple:

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

Réponse plus ancienne

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. Comme 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 également l'événement d'échange d'orientation qui se déclenche sur l'objet de fenêtre lorsque l'appareil tourne.

Vous pouvez également utiliser des requêtes multimédias CSS pour déterminer si l'iPad se trouve en orientation verticale ou horizontale, par exemple:

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

Vous pouvez utiliser l'événement orientationchange comme suit:

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

Window.orientation est ce que vous recherchez. Il y a aussi un événement onOrientationChange fonctionne pour Android, iPhone et je suis surtout sûr d'ipad

En ajoutant à la réponse @mplungjan, j'ai trouvé de meilleurs résultats à l'aide de l'événement, ' Deviceorientation '.

Dans le réseau Mozilla Developer, ils ont une bonne explication sur la façon de normaliser entre webkit et Gecko qui m'a aidé à résoudre ce problème.

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

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

La requête média CSS se déclenche avant l' orientationchange . Si vous cherchez à saisir la fin de l'événement (lorsque la rotation est terminée), voir la hauteur de la fenêtre mobile après le changement d'orientation .

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

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

Il s'agit de savoir si un appareil mobile est en mode portrait ou paysage; Vous n'avez pas besoin de vous soucier de son orientation. Pour tout ce que vous savez, si vous maintenez votre iPad à l'envers, il est en mode portrait.

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

90 signifie paysage, 0 signifie portrait, navigateur croisé, périphérique croisé.

L'événement window.onresize est disponible partout, et il est toujours tiré au bon moment; Jamais trop tôt, jamais trop tard. En fait, la taille de l'écran est toujours exacte.