Detecta la orientación de la ventana gráfica, si la orientación es un mensaje de alerta de visualización vertical que informa al usuario de las instrucciones

Estoy construyendo un sitio web específicamente para dispositivos móviles. Hay una página en particular que se ve mejor en modo horizontal.

¿Hay alguna manera de detectar si el usuario que visita esa página la está viendo en modo vertical y, de ser así, muestra un mensaje que le informa que la página se ve mejor en modo horizontal? Si el usuario ya lo está viendo en modo horizontal, no aparecerá ningún mensaje.

Básicamente, quiero que el sitio detecte la orientación de la ventana gráfica, si la orientación es Vertical , luego muestre un mensaje de alerta que avise al usuario que esta página se ve mejor en modo horizontal .

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

jQuery Mobile tiene un evento que maneja el cambio de esta propiedad ... si desea advertir si alguien rota más tarde, orientationchange

Además, después de buscar en Google, echa un vistazo window.orientation(que creo que se mide en grados ...)

También puede usar window.matchMedia, que yo uso y prefiero ya que se parece mucho a la sintaxis CSS:

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

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

Probado en iPad 2.

David Walsh tiene un enfoque mejor y directo.

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

Durante estos cambios, la propiedad window.orientation puede cambiar. Un valor de 0 significa vista vertical, -90 significa que el dispositivo se gira horizontalmente a la derecha y 90 significa que el dispositivo se gira horizontalmente a la izquierda.

http://davidwalsh.name/orientation-change

Puedes usar CSS3:

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

Hay algunas formas de hacerlo, por ejemplo:

• Cheque window.orientation valor
• Comparar innerHeightvs.innerWidth

Puede adaptar uno de los siguientes métodos.

Compruebe si el dispositivo está en modo vertical

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

Compruebe si el dispositivo está en modo horizontal

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

Ejemplo de uso

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

¿Cómo detecto el cambio de orientación?

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

Creo que la solución más estable es usar la pantalla en lugar de la ventana, porque podría ser tanto horizontal como vertical si cambia el tamaño de la ventana de su navegador en la computadora de escritorio.

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

Para poder aplicar todos estos excelentes comentarios a mi codificación diaria, para la continuidad entre todas mis aplicaciones, he decidido usar lo siguiente en mi código móvil jquery y 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");
  }
}

No intente la ventana fija. Las consultas de orientación (0, 90, etc. no significa vertical, horizontal, etc.):

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

Incluso en iOS7, dependiendo de cómo ingrese al navegador, 0 no siempre es vertical

Después de experimentar un poco, descubrí que girar un dispositivo con orientación orientada siempre activará el resizeevento de una ventana del navegador . Entonces, en su controlador de cambio de tamaño, simplemente llame a una función como:

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

Combiné dos soluciones y funciona bien para mí.

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

No estoy de acuerdo con la respuesta más votada. Uso screeny nowindow

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

Es la forma correcta de hacerlo. Si calculas conwindow.height , tendrá problemas en Android. Cuando el teclado está abierto, la ventana se encoge. Así que usa la pantalla en lugar de la ventana.

La screen.orientation.typees una buena respuesta pero con IE. https://caniuse.com/#search=screen.orientation

Obtenga la orientación (en cualquier momento en su código js) a través de

window.orientation

Cuando window.orientationregrese 0o 180esté en modo vertical , cuando regrese 90o 270esté en modo horizontal .

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

En algunos casos, es posible que desee agregar un pequeño fragmento de código para volver a cargar en la página después de que el visitante giró el dispositivo, para que el CSS se procese correctamente:

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

Otra alternativa para determinar la orientación, basada en la comparación del ancho / alto:

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

Lo usas en el evento "redimensionar":

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

iOS no se actualiza screen.widthy screen.heightcuando cambia la orientación. Android no se actualiza window.orientationcuando cambia.

Mi solución a este 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
    }
}

Puede detectar este cambio de orientación en Android e iOS con el siguiente código:

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

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

Si el onorientationchangeevento no es compatible, el evento vinculado será el resizeevento.

Si tiene los navegadores más recientes, es window.orientationposible que no funcionen. En ese caso, use el siguiente código para obtener el ángulo:

var orientation = window.screen.orientation.angle;

Esto sigue siendo una tecnología experimental, puedes verificar la compatibilidad del navegador aquí

Gracias a tobyodavies por guiar el camino.

Para lograr un mensaje de alerta basado en la orientación del dispositivo móvil, debe implementar el siguiente script dentro del function setHeight() {

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

En lugar de 270, puede ser -90 (menos 90).

Esto se expande en una respuesta anterior. La mejor solución que he encontrado es hacer un atributo CSS inocuo que solo aparece si se cumple una consulta de medios CSS3, y luego tener la prueba JS para ese atributo.

Entonces, por ejemplo, en el CSS tendrías:

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

Luego vas a JavaScript (estoy usando jQuery para funsies). Las declaraciones de color pueden ser extrañas, por lo que es posible que desee usar otra cosa, pero este es el método más infalible que he encontrado para probarlo. Luego puede usar el evento de cambio de tamaño para retomar el cambio. Ponlo todo junto para:

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 mejor parte de esto es que, al escribir esta respuesta, no parece tener ningún efecto en las interfaces de escritorio, ya que (generalmente) no (parecen) pasar ningún argumento de orientación a la página.

Este es el mejor método que encontré, basado en el artículo de David Walsh ( Detectar cambio de orientación en dispositivos móviles )

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

Explicación:

Window.matchMedia () es un método nativo que le permite definir una regla de consulta de medios y verificar su validez en cualquier momento.

Me resulta útil adjuntar un onchangeoyente en el valor de retorno de este método. Ejemplo:

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

Solía ​​para Android Chrome "La API de orientación de pantalla"

Para ver la orientación actual, llame a console.log (screen.orientation.type) (y tal vez screen.orientation.angle).

Resultados: retrato-primaria | retrato secundario | paisaje primario | paisaje secundario

A continuación se muestra mi código, espero que sea útil:

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

• Probé solo para Android Chrome - ok

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

El objeto de ventana en JavaScript en dispositivos iOS tiene una propiedad de orientación que se puede utilizar para determinar la rotación del dispositivo. A continuación se muestran los valores de window.orientation para dispositivos iOS (por ejemplo, iPhone, iPad, iPod) en diferentes orientaciones.

Esta solución también funciona para dispositivos Android. Revisé el navegador nativo de Android (navegador de Internet) y el navegador Chrome, incluso en las versiones anteriores.

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

Esto es lo que yo 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

    }

}

Implementación

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>

Hay una manera de detectar si el usuario volcó su dispositivo al modo vertical screen.orientation

Solo usa el siguiente código:

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

Ahora, onchangeserá despedido cuando un usuario voltee el dispositivo y aparecerá una alerta cuando el usuario use el modo vertical.

Una cosa a tener en cuenta window.orientationes que volverá undefinedsi no está en un dispositivo móvil. Entonces, una buena función para verificar la orientación podría verse así, donde xes window.orientation:

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

Llámalo así:

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

O podrías usar esto ...

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