Rileva l'orientamento del viewport, se l'orientamento è un messaggio di avviso con visualizzazione verticale che avvisa l'utente delle istruzioni

Sto costruendo un sito Web appositamente per dispositivi mobili. C'è una pagina in particolare che è meglio visualizzata in modalità orizzontale.

Esiste un modo per rilevare se l'utente che visita quella pagina la sta visualizzando in modalità Ritratto e, in tal caso, visualizzare un messaggio che informa l'utente che la pagina è visualizzata al meglio in modalità orizzontale? Se l'utente lo sta già visualizzando in modalità orizzontale, non verrà visualizzato alcun messaggio.

Quindi, fondamentalmente, voglio che il sito rilevi l'orientamento del viewport, se l'orientamento è Verticale , quindi visualizzo un messaggio di avviso che avvisa l'utente che questa pagina è meglio visualizzata in modalità orizzontale .

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

jQuery Mobile ha un evento che gestisce la modifica di questa proprietà ... se vuoi avvisare se qualcuno ruota più tardi - orientationchange

Inoltre, dopo alcuni googling, controlla window.orientation(che credo sia misurato in gradi ...)

Puoi anche usare window.matchMedia, che io uso e preferisco in quanto assomiglia molto alla sintassi CSS:

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

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

Testato su iPad 2.

David Walsh ha un approccio migliore e mirato.

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

Durante queste modifiche, la proprietà window.orientation potrebbe cambiare. Un valore pari a 0 indica la vista verticale, -90 indica che il dispositivo è ruotato in orizzontale verso destra e 90 indica che il dispositivo è ruotato in orizzontale verso sinistra.

http://davidwalsh.name/orientation-change

Puoi usare CSS3:

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

Esistono alcuni modi per farlo, ad esempio:

• Dai un'occhiata window.orientation valore
• Confronta innerHeightvs.innerWidth

Puoi adattare uno dei metodi di seguito.

Controlla se il dispositivo è in modalità verticale

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

Controlla se il dispositivo è in modalità orizzontale

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

Esempio di utilizzo

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

Come posso rilevare il cambio di orientamento?

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

Penso che la soluzione più stabile sia usare lo schermo anziché la finestra, perché potrebbe essere sia orizzontale che verticale se ridimensionerai la finestra del tuo browser sul computer desktop.

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

Al fine di applicare tutti questi grandi commenti al mio codice quotidiano, per la continuità tra tutte le mie applicazioni, ho deciso di utilizzare quanto segue sia nel mio codice mobile jquery che 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");
  }
}

Non provare le query fisse di window.orientation (0, 90 ecc. Non significa verticale, orizzontale ecc.):

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

Anche su iOS7 a seconda di come entri nel browser 0 non è sempre verticale

Dopo alcuni esperimenti ho scoperto che la rotazione di un dispositivo orientato all'orientamento attiverà sempre l' resizeevento di una finestra del browser . Quindi nel tuo gestore di ridimensionamento chiama semplicemente una funzione come:

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

Ho combinato due soluzioni e funziona bene per me.

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

Non sono d'accordo con la risposta più votata. Usa screene nonwindow

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

È il modo corretto di farlo. Se calcoli con window.height, avrai problemi su Android. Quando la tastiera è aperta, la finestra si restringe. Quindi usa lo schermo anziché la finestra.

Il screen.orientation.typeè una buona risposta, ma con IE. https://caniuse.com/#search=screen.orientation

Ottieni l'orientamento (in qualsiasi momento nel tuo codice js) tramite

window.orientation

Quando window.orientationritorna 0o 180poi sei in modalità verticale , quando ritorni 90o 270poi sei in modalità orizzontale .

Solo CCS

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

In alcuni casi potresti voler aggiungere un piccolo pezzo di codice per ricaricare la pagina dopo che il visitatore ha ruotato il dispositivo, in modo che il CSS sia reso correttamente:

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

un'altra alternativa per determinare l'orientamento, in base al confronto di larghezza / altezza:

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

Lo usi sull'evento "ridimensiona":

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

iOS non si aggiorna screen.widthe screen.heightquando l'orientamento cambia. Android non si aggiorna window.orientationquando cambia.

La mia soluzione a questo problema:

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

Puoi rilevare questo cambiamento di orientamento su Android e iOS con il seguente codice:

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

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

Se l' onorientationchangeevento non è supportato, l'evento associato sarà l' resizeevento.

Se disponi degli ultimi browser, window.orientationpotrebbe non funzionare. In tal caso, utilizzare il seguente codice per ottenere l'angolo:

var orientation = window.screen.orientation.angle;

Questa è ancora una tecnologia sperimentale, puoi verificare la compatibilità del browser qui

Grazie a tobyodavies per aver guidato la strada.

Per ottenere un messaggio di avviso basato sull'orientamento del dispositivo mobile, è necessario implementare il seguente script all'interno di function setHeight() {

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

Invece di 270, può essere -90 (meno 90).

Questo si espande su una risposta precedente. La migliore soluzione che ho trovato è creare un innocuo attributo CSS che appare solo se viene soddisfatta una query media CSS3 e quindi avere il test JS per quell'attributo.

Ad esempio, nel CSS avresti:

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

Quindi vai su JavaScript (sto usando jQuery per i fanatici). Le dichiarazioni di colore possono essere strane, quindi potresti voler usare qualcos'altro, ma questo è il metodo più sicuro che ho trovato per testarlo. È quindi possibile utilizzare l'evento di ridimensionamento per riprendere il passaggio. Metti tutto insieme per:

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 parte migliore di questo è che dal momento in cui scrivo questa risposta, non sembra avere alcun effetto sulle interfacce desktop, poiché (generalmente) non (sembrano) passare alcun argomento per l'orientamento alla pagina.

Ecco il metodo migliore che ho trovato, basato sull'articolo di David Walsh ( Rileva cambiamenti di orientamento su dispositivi mobili )

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

Spiegazione:

Window.matchMedia () è un metodo nativo che consente di definire una regola di query multimediale e verificarne la validità in qualsiasi momento.

Trovo utile collegare un onchangeascoltatore al valore di ritorno di questo metodo. Esempio:

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

Ho usato per Android Chrome "L'API di orientamento dello schermo"

Per guardare l'orientamento attuale, chiama console.log (screen.orientation.type) (e forse screen.orientation.angle).

Risultati: ritratto-primario | ritratto secondario | paesaggio primario | paesaggio-secondaria

Di seguito è il mio codice, spero che sarà 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();

• Ho testato solo per Android Chrome - ok

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

L'oggetto finestra in JavaScript sui dispositivi iOS ha una proprietà di orientamento che può essere utilizzata per determinare la rotazione del dispositivo. Quanto segue mostra i valori window.orientation per dispositivi iOS (ad es. IPhone, iPad, iPod) con diversi orientamenti.

Questa soluzione funziona anche per i dispositivi Android. Ho controllato nel browser nativo Android (browser Internet) e nel browser Chrome, anche nelle versioni precedenti.

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

Questo è quello che uso.

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

    }

}

Implementazione

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>

C'è un modo in cui puoi rilevare se l'utente ha portato il proprio dispositivo in modalità verticale usando screen.orientation

Basta usare il seguente codice:

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

Ora, onchangeverrà attivato quando l'utente lancia il dispositivo e verrà visualizzato un avviso quando l'utente utilizza la modalità ritratto.

Una cosa da notare window.orientationè che tornerà undefinedse non si è su un dispositivo mobile. Quindi una buona funzione per verificare l'orientamento potrebbe apparire così, dove si xtrova window.orientation:

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

Chiamalo così:

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

O potresti semplicemente usare questo ..

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