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

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

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

    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.

    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: ( juego , 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

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

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

    Aquí esta lo que hice:

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

    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!

    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.

      

    Y el HTML:

    This site is not thought to be viewed in landscape mode, please turn your device

    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

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