Détecter l'orientation de la fenêtre, si l'orientation est Portrait, un message d'alerte informe l'utilisateur des instructions.

Je crée un site Web spécialement 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 qui visite cette page la visualise en mode Portrait et, dans l'affirmative, d'afficher un message l'informant que la page est mieux visualisée en mode paysage? Si l'utilisateur le regarde déjà en mode paysage, aucun message n'apparaîtra.

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 cette page est mieux consultée en mode Paysage .

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

De plus, après quelques recherches sur Google, consultez window.orientation(ce qui est, je crois, mesuré en degrés ...)

Vous pouvez également utiliser window.matchMediace que j'utilise et préfère car il ressemble étroitement à 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.

David Walsh a une meilleure approche et au point.

// 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 changer. Une valeur de 0 signifie une vue portrait, -90 signifie que l'appareil est tourné en paysage vers la droite et 90 signifie que l'appareil est tourné en paysage vers la gauche.

http://davidwalsh.name/orientation-change

Vous pouvez utiliser CSS3:

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

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

• Vérifier window.orientation valeur
• Comparer innerHeightvsinnerWidth

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

Je pense que la solution la plus stable consiste à utiliser l'écran au lieu de la fenêtre, car cela peut être à la fois - 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!");
}

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

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");
  }
}

N'essayez pas les requêtes window.orientation fixes (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 façon dont vous entrez dans le navigateur 0 n'est pas toujours portrait

Après quelques expérimentations, j'ai découvert que la rotation d'un appareil sensible à l'orientation déclenche toujours l' resizeévénement 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);
}

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

Je ne suis pas d'accord avec la réponse la plus votée. Utiliser screenet nonwindow

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

Est-ce la bonne façon de le faire. Si vous calculez avecwindow.height , vous aurez des problèmes sur Android. Lorsque le clavier est ouvert, la fenêtre se rétrécit. Utilisez donc l'écran au lieu de la fenêtre.

C'est screen.orientation.typeune bonne réponse mais avec IE. https://caniuse.com/#search=screen.orientation

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

window.orientation

Au window.orientationretour 0ou 180alors vous êtes en mode portrait , au retour 90ou 270alors vous êtes en mode paysage .

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 souhaiterez peut-être ajouter un petit morceau de code à recharger sur la page après que le visiteur a fait pivoter l'appareil, afin que le CSS soit rendu correctement:

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

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

//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");
    }
}

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

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

Vous l'utilisez lors de l'événement "resize":

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

iOS ne se met pas à jour screen.widthet screen.heightlorsque l'orientation change. Android ne se met pas à jourwindow.orientation lorsqu'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' onorientationchangeévénement n'est pas pris en charge, l'événement lié sera l' resizeévénement.

Si vous avez les derniers navigateurs, cela window.orientationpeut ne pas fonctionner. Dans ce cas, utilisez le code suivant pour obtenir l'angle -

var orientation = window.screen.orientation.angle;

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

Merci à tobyodavies pour avoir ouvert la voie.

Pour obtenir un message d'alerte basé sur l'orientation de l'appareil mobile, vous devez implémenter le script suivant dans le function setHeight() {

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

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

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 n'apparaît que si une requête multimédia CSS3 est satisfaite, puis à effectuer le test JS pour cet attribut.

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

@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 passez ensuite à JavaScript (j'utilise jQuery pour les funsies). Les déclarations de couleur peuvent être étranges, vous pouvez donc 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 reprendre la commutation. 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 cela est qu'au moment où j'écris cette réponse, elle ne semble pas avoir d'effet sur les interfaces de bureau, car elles (généralement) ne (semblent) pas passer d'argument pour l'orientation de la page.

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 onchangeécouteur sur la valeur de retour de cette méthode. Exemple:

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

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

Pour consulter l'orientation actuelle, appelez console.log (screen.orientation.type) (et peut-être screen.orientation.angle).

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

Ci-dessous mon code, j'espère qu'il 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

screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

L'objet fenêtre en JavaScript sur les appareils iOS possède une propriété d'orientation qui peut être utilisée pour déterminer la rotation de l'appareil. Ce qui suit montre les valeurs window.orientation pour les appareils iOS (par exemple iPhone, iPad, iPod) à 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 de celui-ci.

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

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

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

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

Utilisez simplement 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!');
     }
}

Maintenant, il onchangesera déclenché chaque fois que l'utilisateur retournera l'appareil et une alerte s'affichera lorsque l'utilisateur utilisera le mode portrait.

Une chose à noter window.orientationest qu'il reviendra undefinedsi vous n'êtes pas sur un appareil mobile. Donc, une bonne fonction pour vérifier l'orientation pourrait ressembler à ceci, où xest 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-le ainsi:

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

Ou vous pouvez simplement utiliser cela ..

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