orientation change javascript

¿Cómo puedo detectar correctamente el cambio de orientación con Phonegap en iOS?

Question

Encontré este código de prueba de orientación a continuación buscando material de referencia de JQTouch. Esto funciona correctamente en el simulador de iOS en Safari móvil, pero no se maneja correctamente en Phonegap. Mi proyecto se está ejecutando en el mismo problema que está matando a esta página de prueba. ¿Hay alguna forma de detectar el cambio de orientación mediante JavaScript en Phonegap?

window.onorientationchange = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch (orientation) {
    case 0:
      /* If in portrait mode, sets the body''s class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
         in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "portrait");

      /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
      document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
      break;

    case 90:
      /* If in landscape mode with the screen turned to the left, sets the body''s class attribute to landscapeLeft. In this case, all style definitions matching the
         body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
      break;

    case -90:
      /* If in landscape mode with the screen turned to the right, sets the body''s class attribute to landscapeRight. Here, all style definitions matching the
         body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
      break;
  }
}

Answer 1

Aquí esta lo que hice:

window.addEventListener(''orientationchange'', doOnOrientationChange);

function doOnOrientationChange()
{
      if (screen.height > screen.width) {
         console.log(''portrait'');
      } else {
         console.log(''landscape'');
      }
}

Answer 2

Creo que la respuesta correcta ya se ha publicado y aceptado, sin embargo, hay un problema que he experimentado y que otros han mencionado aquí.

En determinadas plataformas, varias propiedades, como las dimensiones de la ventana ( window.innerWidth , window.innerHeight ) y la propiedad window.orientation , no se actualizarán en el momento en que se window.innerHeight el evento "orientationchange" . Muchas veces, la propiedad window.orientation undefined está undefined durante unos pocos milisegundos después del encendido de "orientationchange" (al menos está en Chrome en iOS).

La mejor forma que encontré para manejar este problema fue:

var handleOrientationChange = (function() {
    var struct = function(){
        struct.parse();
    };
    struct.showPortraitView = function(){
        alert("Portrait Orientation: " + window.orientation);
    };
    struct.showLandscapeView = function(){
        alert("Landscape Orientation: " + window.orientation);
    };
    struct.parse = function(){
        switch(window.orientation){
            case 0:
                    //Portrait Orientation
                    this.showPortraitView();
                break;
            default:
                    //Landscape Orientation
                    if(!parseInt(window.orientation) 
                    || window.orientation === this.lastOrientation)
                        setTimeout(this, 10);
                    else
                    {
                        this.lastOrientation = window.orientation;
                        this.showLandscapeView();
                    }
                break;
        }
    };
    struct.lastOrientation = window.orientation;
    return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);

Estoy comprobando si la orientación es indefinida o si la orientación es igual a la última orientación detectada. Si alguno de ellos es verdadero, espero diez milisegundos y luego analizo la orientación nuevamente. Si la orientación es un valor adecuado, llamo a las funciones showXOrientation . Si la orientación no es válida, continúo activando mi función de comprobación, esperando diez milisegundos cada vez, hasta que sea válida.

Ahora, haría un JSFiddle para esto, como solía hacer, pero JSFiddle no me había funcionado y mi error de soporte se cerró porque nadie más informaba del mismo problema. Si alguien más quiere convertir esto en un JSFiddle, por favor sigue adelante.

¡Gracias! ¡Espero que esto ayude!

Answer 3

Encontré este código para detectar si el dispositivo está en orientación horizontal y en este caso agregar una página de bienvenida que dice "cambiar la orientación para ver el sitio". Está funcionando en iOS, Android y teléfonos con Windows. Creo que esto es muy útil ya que es bastante elegante y evita establecer una vista de paisaje para el sitio móvil. El código está funcionando muy bien. Lo único que no satisface por completo es que si alguien carga la página en modo horizontal, la página de inicio no aparece.

<script>
(function() {
    ''use strict'';

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
    if (isMobile.any()) {
        doOnOrientationChange();
        window.addEventListener(''resize'', doOnOrientationChange, ''false'');
    }

    function doOnOrientationChange() {
        var a = document.getElementById(''alert'');
        var b = document.body;
        var w = b.offsetWidth;
        var h = b.offsetHeight;
        (w / h > 1) ? (a.className = ''show'', b.className = ''full-body'') : (a.className = ''hide'', b.className = '''');
    }
})();
</script>

Y el HTML: <div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>

Answer 4

Esto es lo que hago:

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90 || 90:
        alert(''landscape'');
        break; 
      default:
        alert(''portrait'');
        break; 
    }
}
  
window.addEventListener(''orientationchange'', doOnOrientationChange);
  
// Initial execution if needed
doOnOrientationChange();

Answer 5

Estoy creando una aplicación jQTouch en PhoneGap para iPhone. He estado batallando con este problema por días. He visto la solución eventlistener sugerida algunas veces, pero no pude hacer que funcione.

Al final, se me ocurrió una solución diferente. Básicamente, verifica el ancho del cuerpo periódicamente usando settimeout. Si el ancho es 320, la orientación es vertical, si es 480 y luego horizontal. Luego, si la orientación ha cambiado desde la última verificación, se activará una función de cosas para retratos o una función de cosas de jardinería en la que puede hacer lo suyo para cada orientación.

Código (nota, sé que hay algo de repetición en el código, ¡simplemente no me he molestado en recortarlo todavía!):

// get original orientation based on body width
deviceWidth = $(''body'').width();
if (deviceWidth == 320) {
    currentOrientation = "portrait";
}
else if (deviceWidth == 480) {
    currentOrientation = "landscape";
}

// fire a function that checks the orientation every x milliseconds
setInterval(checkOrientation, 500);

// check orientation
function checkOrientation() {
    deviceWidth = $(''body'').width();
    if (deviceWidth == ''320'') {
        newOrientation = "portrait";
    }
    else if (deviceWidth == ''480'') {
        newOrientation = "landscape";
    }
    // if orientation changed since last check, fire either the portrait or landscape function
    if (newOrientation != currentOrientation) {
        if (newOrientation == "portrait") {
            changedToPortrait();
        }
        else if (newOrientation == "landscape") {
            changedToLandscape();
        }
        currentOrientation = newOrientation;
    }
}

// landscape stuff
function changedToLandscape() {
    alert(''Orientation has changed to Landscape!'');
}

// portrait stuff
function changedToPortrait() {
    alert(''Orientation has changed to Portrait!'');
}

Answer 6

Lo siguiente funcionó para mí:

function changeOrientation(){
switch(window.orientation) {
case 0: // portrait, home bottom
case 180: // portrait, home top
 alert("portrait H: "+$(window).height()+" W: "+$(window).width());       
 break;
          case -90: // landscape, home left
          case 90: // landscape, home right
        alert("landscape H: "+$(window).height()+" W: "+$(window).width());
            break;
        }
    }

 window.onorientationchange = function() { 
            //Need at least 800 milliseconds
            setTimeout(changeOrientation, 1000);
        }

Necesitaba el tiempo de espera porque el valor de window.orientation no se actualiza de inmediato

Answer 7

Mientras trabajaba con el evento orientationchange , necesitaba un tiempo de espera para obtener las dimensiones correctas de los elementos en la página, pero matchMedia funcionaba bien. Mi código final:

var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;

if (typeof(matchMedia) !== ''undefined'') {
  // use matchMedia function to detect orientationchange
  window.matchMedia(''(orientation: portrait)'').addListener(function() {
    // your code ...
  });
} else {
  // use orientationchange event with timeout (fires to early)
  $(window).on(''orientationchange'', function() {
    window.setTimeout(function() {
      // your code ...
    }, 300)
  });
}

Answer 8

También soy nuevo en iOS y Phonegap, pero pude hacerlo agregando un eventListener. Hice lo mismo (usando el ejemplo al que hace referencia) y no pude hacer que funcionara. Pero esto pareció hacer el truco:

// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation); 

function updateOrientation(e) {
switch (e.orientation)
{   
    case 0:
        // Do your thing
        break;

    case -90:
        // Do your thing
        break;

    case 90:
        // Do your thing
        break;

    default:
        break;
    }
}

Puede tener algo de suerte buscando en el grupo de Google PhoneGap el término "orientación" .

Un ejemplo que leí como un ejemplo sobre cómo detectar la orientación fue Pie Guy: ( game , archivo js ). Es similar al código que has publicado, pero como tú ... No pude hacerlo funcionar.

Una advertencia: el EventListener funcionó para mí, pero no estoy seguro si este es un enfoque excesivamente intensivo. Hasta ahora, ha sido la única manera que me ha funcionado, pero no sé si hay formas mejores y más simples.

ACTUALIZACIÓN corrigió el código anterior, funciona ahora

Answer 9

Yo uso window.onresize = function(){ checkOrientation(); } window.onresize = function(){ checkOrientation(); } Y en checkOrientation puede usar window.orientation o body width checking pero la idea es que "window.onresize" es el método más cruzado de navegador, al menos con la mayoría de los navegadores de escritorio y de dispositivos móviles que he tenido la oportunidad para probar con.

Answer 10

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

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