web-dev-qa-db-fra.com

Détecter l'orientation de la fenêtre d'affichage, si l'orientation correspond à un message d'alerte d'affichage Portrait informant l'utilisateur d'instructions

Je construis un site Web spécifiquement pour les appareils mobiles. Il y a une page en particulier qui est mieux visualisée en mode paysage. 

Existe-t-il un moyen de détecter si l’utilisateur visitant cette page l’affiche en mode Portrait et, le cas échéant, d’afficher un message l’informant que la meilleure visualisation de la page est en mode Paysage? Si l'utilisateur le visualise déjà en mode paysage, aucun message ne s'affichera.

Donc, fondamentalement, je veux que le site détecte l'orientation de la fenêtre d'affichage, si l'orientation est Portrait , puis affiche un message d'alerte informant l'utilisateur que la meilleure visualisation de cette page est en mode Paysage .

Merci beaucoup, Dan

javascriptjquerymobileviewportdevice-orientation
168
Dan
if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile a un événement qui gère le changement de cette propriété ... si vous voulez avertir si quelqu'un tourne plus tard - orientationchange

En outre, après quelques recherches sur Google, consultez window.orientation (qui est, je crois, mesuré en degrés ...

238
tobyodavies

Vous pouvez également utiliser window.matchMedia, que j'utilise et préfère car il ressemble beaucoup à la syntaxe CSS:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Testé sur iPad 2.

121
crmpicco

David Walsh a une approche meilleure et directe.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

Au cours de ces modifications, la propriété window.orientation peut être modifiée. Une valeur de 0 correspond à une vue en portrait, -90 à un paysage tourné à droite et 90 à un paysage.

http://davidwalsh.name/orientation-change

85
Jatin

Vous pouvez utiliser CSS3:

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}
33
Thomas Decaux

Il y a plusieurs façons de le faire, par exemple:

  • Vérifier la valeur window.orientation
  • Comparer innerHeight contre innerWidth

Vous pouvez adapter l’une des méthodes ci-dessous.

Vérifiez si l'appareil est en mode portrait 

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Vérifiez si l'appareil est en mode paysage 

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

Exemple d'utilisation 

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

Comment détecter le changement d'orientation? 

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});
17
martynas

Je pense que la solution la plus stable consiste à utiliser l’écran plutôt que la fenêtre, car ce pourrait être à la fois en mode paysage ou portrait si vous redimensionnez la fenêtre de votre navigateur sur un ordinateur de bureau.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}
10
artnikpro

Afin d’appliquer tous ces excellents commentaires à mon codage quotidien, pour assurer la continuité entre toutes mes applications, j’ai décidé d’utiliser les éléments suivants dans les codes jquery et jquery mobile.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}
8
dLindley

N'essayez pas de résoudre le problème window.orientation (0, 90, etc.) ne signifie pas portrait, paysage, etc.):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

Même sur iOS7, selon la manière dont vous entrez dans le navigateur, 0 n'est pas toujours portrait

6
kev666n

Après quelques expériences, j'ai constaté que la rotation d'un périphérique sensible à l'orientation déclenchera toujours l'événement resize d'une fenêtre de navigateur. Donc, dans votre gestionnaire de redimensionnement, appelez simplement une fonction comme:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}
5
Dave Sag

J'ai combiné deux solutions et cela fonctionne bien pour moi.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);
5
ARTniyet

Obtenir l'orientation (à tout moment dans votre code js) via

window.orientation

Lorsque window.orientation renvoie 0 ou 180, vous êtes en mode portrait , lorsque vous renvoyez 90 ou 270, vous passez en mode paysage .

4
Sliq

Je ne suis pas d'accord avec la réponse la plus votée. Utilisez screen et non window

    if(screen.innerHeight > screen.innerWidth){
    alert("Please use Landscape!");
}

Est-ce la bonne façon de le faire. Si vous calculez avec window.height, vous aurez des problèmes sur Android. Lorsque le clavier est ouvert, la fenêtre se réduit. Donc, utilisez l'écran au lieu de la fenêtre.

Le screen.orientation.type est une bonne réponse mais avec IE. https://caniuse.com/#search=screen.orientation

3
Stefdelec

une autre alternative pour déterminer l’orientation, basée sur une comparaison largeur/hauteur:

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
}

Vous l'utilisez pour l'événement "redimensionner":

window.addEventListener("resize", function() { ... });
2
Gregor Srdic

iOS ne met pas à jour screen.width & screen.height lorsque l'orientation change. Android ne met pas à jour window.orientation quand il change. 

Ma solution à ce problème:

var isAndroid = /(Android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

Vous pouvez détecter ce changement d'orientation sur Android ainsi que sur iOS avec le code suivant:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

Si l'événement onorientationchange n'est pas pris en charge, l'événement lié sera l'événement resize.

2
Sandman
//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}
2
Adolph Trudeau
$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});
2
Jomin George Paul

CCS uniquement 

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

Dans certains cas, vous voudrez peut-être ajouter un petit morceau de code à recharger sur la page après que le visiteur a fait pivoter le périphérique, afin que le CSS soit restitué correctement:

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};
2
cptstarling

Au lieu de 270, il peut être -90 (moins 90).

1
zeuf

Merci à tobyodavies pour avoir guidé le chemin.

Pour obtenir un message d'alerte en fonction de l'orientation du périphérique mobile, vous devez implémenter le script suivant dans la fonction function setHeight() {.

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}
1
Dan

Cela développe une réponse précédente. La meilleure solution que j'ai trouvée consiste à créer un attribut CSS inoffensif qui apparaît uniquement si une requête de support CSS3 est remplie, puis à effectuer le test JS pour cet attribut.

Ainsi, par exemple, dans le CSS, vous avez:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

Vous allez ensuite à JavaScript (j'utilise jQuery pour les funsies). Les déclarations de couleur peuvent être étranges, alors vous voudrez peut-être utiliser autre chose, mais c'est la méthode la plus infaillible que j'ai trouvée pour la tester. Vous pouvez ensuite simplement utiliser l'événement de redimensionnement pour choisir le changement. Mettez tout cela ensemble pour:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

La meilleure partie de ceci est que, au moment où j'écris cette réponse, cela ne semble pas avoir d'effet sur les interfaces de bureau, puisqu'elles ne (généralement) passent (apparemment) aucun argument pour l'orientation vers la page.

1
Josh C

L'objet Window en JavaScript sur les périphériques iOS a une propriété d'orientation qui peut être utilisée pour déterminer la rotation du périphérique. Ce qui suit montre les valeurs window.orientation pour les appareils iOS (par exemple, iPhone, iPad, iPod) selon différentes orientations.

Cette solution fonctionne également pour les appareils Android. J'ai vérifié dans le navigateur natif Android (navigateur Internet) et dans le navigateur Chrome, même dans les anciennes versions.

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}
1
Dmytro Medvid

Voici la meilleure méthode que j'ai trouvée, basée sur l'article de David Walsh ( Détecter le changement d'orientation sur les appareils mobiles )

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

Explication: 

Window.matchMedia () est une méthode native qui vous permet de définir une règle de requête multimédia et de vérifier sa validité à tout moment.

Je trouve utile d'attacher un auditeur onchange sur la valeur de retour de cette méthode. Exemple:

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }
1
Shibl

J'ai utilisé pour Android Chrome "L'API d'orientation de l'écran"

Pour consulter l'orientation actuelle, appelez console.log (screen.orientation.type) (et éventuellement screen.orientation.angle).

Résultats: portrait-primaire | portrait secondaire | paysage-primaire | paysage secondaire

Ci-dessous mon code, j'espère que cela vous sera utile:

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();
  • J'ai testé uniquement pour Android Chrome - ok
1
Dmitry Sokolyuk

C'est ce que j'utilise.

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

La mise en oeuvre

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);
1
CTE
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
1
zloctb
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>
0
Gaurav kumar MVC Expert

Certains périphériques n'ont pas fourni l'événement d'orientationchange, mais déclenchent l'événement de redimensionnement de la fenêtre:

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

Un peu moins évident que l'événement orientationchange, mais fonctionne très bien. S'il vous plaît vérifier ici

0
yadavr

Une chose à noter à propos de window.orientation est qu'il retournera undefined si vous n'êtes pas sur un appareil mobile. Donc, une bonne fonction pour vérifier l’orientation pourrait ressembler à ceci, où x est window.orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

Appelez ça comme ça:

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);
0
Harry Stevens

Ou vous pouvez simplement utiliser ceci ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
0
Brad

Il existe un moyen de détecter si l'utilisateur a basculé son appareil en mode portrait à l'aide de screen.orientation

Il suffit d'utiliser le code ci-dessous:

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

Désormais, onchange sera déclenché chaque fois que l'utilisateur retournera l'appareil et une alerte s'ouvrira lorsqu'il utilisera le mode portrait.

0
Naman

Si vous avez les derniers navigateurs, window.orientation risque de ne pas fonctionner. Dans ce cas, utilisez le code suivant pour obtenir un angle - 

var orientation = window.screen.orientation.angle;

Ceci est encore une technologie expérimentale, vous pouvez vérifier la compatibilité du navigateur ici

0
Atul Kumar