Détection de l'orientation vers le point de vue, si l'orientation est L'affichage D'un Portrait message d'alerte informant l'Utilisateur des instructions

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

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

pendant ces changements, la fenêtre.propriété orientation peut changer. Une valeur de 0 signifie que l'affichage portrait, -90 signifie que l'appareil est paysage tourné vers la droite, et 90 signifie que l'appareil est paysage tourné vers la gauche.

http://davidwalsh.name/orientation-change

vous pouvez utiliser CSS3 :

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

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

• Vérifier window.orientation valeur
• comparez innerHeight vs. innerWidth

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

vérifier si l'appareil est en mode portrait

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

Vérifier si l'appareil est en mode paysage

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

exemple d'usage

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

Comment puis-je 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 est d'utiliser l'écran au lieu de la fenêtre, parce qu'il pourrait être à la fois - paysage ou portrait si vous voulez redimensionner la fenêtre de votre navigateur sur l'ordinateur de bureau.

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

afin d'appliquer tous ces grands commentaires à mon codage quotidien, pour la continuité entre toutes mes applications, j'ai décidé d'utiliser ce qui suit 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 la fenêtre fixe.questions d'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 comment 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 dispositif conscient de l'orientation déclenchera toujours l'événement resize de la fenêtre du navigateur. Ainsi, dans votre gestionnaire resize, appelez simplement une fonction comme:

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

j'ai combiné deux solutions et ça marche très bien pour moi.

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

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

window.orientation

quand window.orientation retourne 0 ou 180 alors vous êtes en mode portrait , quand 90 ou 270 alors vous êtes en mode paysage .

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

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

Est 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étrécit. 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

//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 solution pour déterminer l'orientation, fondée sur une comparaison entre la largeur et la hauteur:

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

vous l'utilisez sur "Redimensionner" événement:

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

iOS doens pas de mise à jour screen.width & screen.height lors de changements d'orientation. 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 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 supporté, l'événement lié sera l'événement resize .

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

merci à tobyodavies pour guider le chemin.

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 -90 (moins 90).

ceci développe une réponse précédente. La meilleure solution que j'ai trouvée est de faire un attribut CSS inoffensif qui n'apparaît que si une requête média CSS3 est satisfaite, et ensuite avoir 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 allez ensuite à JavaScript (j'utilise jQuery pour les funsies). Les déclarations de couleur peuvent être bizarres, donc vous pouvez utiliser autre chose, mais c'est la méthode la plus infaillible que j'ai trouvé pour le tester. Vous pouvez alors simplement utiliser l'événement redimensionner pour prendre en charge la commutation. Mettez tout 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 qu'au moment où j'écris cette réponse, elle ne semble pas avoir d'effet sur les interfaces de bureau, puisqu'ils (généralement) ne passent pas (semblent passer) n'importe quel argument pour l'orientation à 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:

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

je trouve utile de joindre une onchange d'écoute 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 de L'écran"

pour regarder la console d'appel d'orientation actuelle.journal(l'écran.orientation.type) (et peut-être l'écran.orientation.angle.)

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

ci-dessous est mon code, j'espère qu'il 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é seulement pour Android Chrome-ok

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

L'objet window 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 la fenêtre des valeurs.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 android natif du navigateur (navigateur Internet) et dans le navigateur Chrome, même dans les anciennes versions.

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

CCS seulement

@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 pouvez vouloir ajouter un petit morceau de code pour recharger à la page après que le visiteur a fait tourner l'appareil, de sorte que le CSS est rendu correctement:

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

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

    }

}

mise en œuvre

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 y a un moyen de détecter si l'Utilisateur a activé son appareil en mode portrait en utilisant 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!');
     }
}

maintenant, onchange sera tiré lorsque l'utilisateur flips l'appareil et l'alerte pop-up lorsque l'utilisateur utilisant le mode portrait.

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

ou vous pouvez juste utiliser ceci..

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

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

var orientation = window.screen.orientation.angle;

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