web-dev-qa-db-fra.com

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

Est-il possible de détecter le changement d'orientation du navigateur sur l'iPad ou le Galaxy Tab en utilisant javascript? Je pense qu'il est possible d'utiliser des requêtes de médias CSS.

javascriptcssipadaccelerometergalaxy-tab
20
manraj82

UPDATE:

Vous voudrez peut-être vérifier 

jQuery mobile orientationchange

ou la plaine JS one:

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

MDN:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

Réponse plus ancienne

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

Safari sur iPad prend en charge la propriété window.orientation. Vous pouvez donc, si nécessaire, 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 existe également l'événement orientationchange qui se déclenche sur l'objet window lorsque le périphérique est pivoté.

Vous pouvez également utiliser les requêtes de média CSS pour déterminer si l'iPad est maintenu verticalement ou horizontalement, 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>
24
mplungjan

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

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

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();
0
Bryan Dartout

De " Détection de paysages portrait horizontaux, multi-appareils et multi-navigateurs "

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 tenez 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é, appareil croisé.

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

La version JavaScript serait la suivante, corrigez-moi s'il vous plaît si je me trompe.

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

En ajoutant à la réponse @mplungjan, j’ai trouvé de meilleurs résultats en utilisant l’événement "natif" du Webkit (je ne sais pas comment on l’appelle appelé), ' deviceorientation '.

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

0
Hugo

window.orientation est ce que vous recherchez. il y a aussi un événement onOrientationChange fonctionne pour Android, iphone et, j'en suis presque sûr, pour ipad

0
hachev

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

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

La requête multimédia CSS est déclenchée avant la orientationchange. Si vous souhaitez capturer la fin de l'événement (une fois la rotation terminée), voir hauteur de la fenêtre d'affichage mobile après le changement d'orientation .

0
Gajus