javascript - pantalla - sweet alert bootstrap

Detectar la orientación de la ventana gráfica, si la orientación es Vertical, mensaje de alerta de pantalla que informa al usuario de las instrucciones

Question

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 lo está viendo en modo vertical y, de ser así, mostrar un mensaje que informe al usuario que la página se ve mejor en modo horizontal? Si el usuario ya lo está viendo en modo apaisado, entonces no aparecerá ningún mensaje.

Entonces, básicamente, quiero que el sitio detecte la orientación de la ventana gráfica, si la orientación es Vertical , y luego mostrar un mensaje de alerta avisando al usuario que esta página se ve mejor en modo Paisaje .

Muchas gracias, Dan

Answer 1

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

Answer 2

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

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

Answer 3

David Walsh tiene un enfoque mejor y al punto.

// 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 gira horizontalmente hacia la derecha, y 90 significa que el dispositivo gira horizontalmente hacia la izquierda.

http://davidwalsh.name/orientation-change

Answer 4

Después de un poco de experimentación, descubrí que al rotar un dispositivo orientado a la orientación siempre se desencadenará un evento de cambio de resize la ventana del navegador. Entonces en tu controlador de cambio de tamaño simplemente llama a una función como:

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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.

Encuentro útil adjuntar un detector de cambio en el valor de retorno de este método. Ejemplo:

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

Answer 8

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

Answer 9

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 continuar con 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 (en general) no transmiten (parecen) ningún argumento de orientación a la página.

Answer 10

Gracias a tobyodavies por guiar el camino.

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

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

Answer 11

Hay algunas maneras de hacerlo, por ejemplo:

• Compruebe el valor de window.orientation
• Comparar innerHeight vs. innerWidth

Puede adaptar uno de los métodos a continuación.

Verifique si el dispositivo está en modo vertical

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

Verificar si el dispositivo está en modo apaisado

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

Answer 12

Hay una forma en la que puede detectar si el usuario cambió su dispositivo al modo vertical usando 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, onchange activará cuando el usuario voltee el dispositivo y la alerta emergerá cuando el usuario use el modo vertical.

Answer 13

No estoy de acuerdo con la respuesta más votada. Usa la screen y no la window

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

Es la forma correcta de hacerlo. Si calcula con window.height , tendrá problemas con Android. Cuando el teclado está abierto, la ventana se encoge. Entonces usa la pantalla en lugar de la ventana.

El screen.orientation.type es una buena respuesta pero con IE. https://caniuse.com/#search=screen.orientation

Answer 14

No intente las consultas de ventanas fijas.orientación (0, 90 etc. no significa retrato, paisaje, etc.):

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

Incluso en iOS7, dependiendo de cómo ingreses al navegador, 0 no siempre es un retrato

Answer 15

O podrías usar esto ...

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

Answer 16

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

window.orientation

Cuando window.orientation devuelve 0 o 180 entonces estás en modo vertical , cuando regresas 90 o 270 entonces estás en modo horizontal .

Answer 17

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

Answer 18

Puedes usar CSS3:

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

Answer 19

También puede usar window.matchMedia , que uso y prefiero, ya que se asemeja 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.

Answer 20

Una cosa a tener en cuenta sobre window.orientation es que volverá undefined si no está en un dispositivo móvil. De modo que una buena función para verificar la orientación podría verse así, donde x es 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);

Answer 21

Utilicé para Android Chrome "The Screen Orientation API"

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

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

A continuación está 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

Answer 22

iOS no actualiza screen.width y screen.height cuando cambia la orientación. Android no actualiza window.orientation cuando 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 y en 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 evento onorientationchange no es compatible, el evento enlazado será el evento de cambio de resize .

Answer 23

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() { ... });

Answer 24

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 represente correctamente:

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

Answer 25

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

Answer 26

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

Answer 27

//see also http://.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");
    }
}

Answer 28

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

jQuery Mobile tiene un evento que maneja el cambio de esta propiedad ... si quieres avisar si alguien rota más tarde - orientationchange

Además, después de buscar en Google, mira window.orientation (que creo que se mide en grados ...

Answer 29

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