Cómo deshabilitar el cambio de paisaje / retrato en una aplicación web para móviles (navegador de Android / iOS Mobile Safari)

Estoy tratando de deshabilitar la rotación del teléfono afectando la página web de una de mis aplicaciones móviles HTML5. No hay reorganización del diseño, cambio de tamaño, comportamiento de cambio de orientación.

Lo quiero para que gire el teléfono y el diseño inicial cargado seguirá siendo el mismo, obligando al usuario a usar la aplicación en la orientación original. Hay muchas sutilezas a la lógica del usuario y realmente siento que esto es necesario en mi aplicación, así que no hay comentarios sobre esa opción, más bien ayuda para mi pregunta en la primera oración.

  1. Traté de escuchar los eventos de 'orientationchange' y 'redimensionar' y llamar a preventDefault y stopPropagation en ellos, para evitar que cualquier comportamiento del navegador de reorganizar la página se ajustara a una vista de paisaje cuando se volviera. Bueno, obviamente prevenir cualquier cosa (idealmente).

    window.addEventListener("orientationchange", function (e) { e.preventDefault(); e.stopPropagation(); }, false); window.addEventListener("resize", function (e) { e.preventDefault(); e.stopPropagation(); }, false); 

Hecho absolutamente ninguna diferencia. El navegador todavía reorganizó la página en Android (pre2.1 y posterior) y en el iPhone 4-5.

  1. Etiquetas meta intentadas

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no /> 

    Luego se enojó, intentó

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> 

    Tampoco hicieron la diferencia.

  2. Miró furiosamente en StackOverflow, vi lo que hice en el paso 1. puesto allí varias veces … intenté de nuevo para asegurarse de que no estaba estropeando algo. No funcionó.

  3. Absorbió mi orgullo, luego decidió seguir corriendo en una pared de ladrillo debido al orgullo, entonces realmente absorbió mi orgullo y publicó aquí.

HALP.

La solución obvia es usar javaScript para esto:

 if(window.innerHeight > window.innerWidth){ document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; } 

Cuando la pantalla gira, gírela hacia atrás.

Lo hice con el siguiente trabajo alrededor, que pide al usuario volver al modo de retrato.
Una vez que el usuario regrese al modo de retrato, se le permitirá interactuar con la aplicación.

 <head> <style type="text/css"> #landscape{ position: absolute; top: 0px; left: 0px; background: #000000; width: 100%; height: 100%; display: none; z-index: 20000; opacity: 0.9; margin:0 auto; } #landscape div{ color: #FFFFFF; opacity: 1; top: 50%; position: absolute; text-align: center; display: inline-block; width: 100%; } </style> <script> function doOnOrientationChange() { switch(window.orientation) { case -90: document.getElementById("landscape").style.display="block"; break; case 90: document.getElementById("landscape").style.display="block"; break; default: document.getElementById("landscape").style.display="none"; break; } } //Listen to orientation change window.addEventListener('orientationchange', doOnOrientationChange); </script> </head> <body onload="doOnOrientationChange();"> <div id="landscape"><div>"Rotate Device to Portrait"</div></div> </body> 

No puedes inhabilitar la orientación móvil en la aplicación web. Lo que puedes hacer es girar la página a retrato (usando la rotación css de JS) cuando cambian de orientación a modelo horizontal. De esta manera se verán obligados a utilizar su aplicación web en modo retrato.

También puede mostrarles un mensaje ("modo retrato solamente" cuando intentan ver en modo horizontal)

¡Manténlo corto y simple! :]

 window.addEventListener('orientationchange', function () { if (window.innerHeight > window.innerWidth) { document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; } }); 

Añadiendo android: configChanges = "keyboardHidden | orientation" a su AndroidManifest.xml. Esto le dice al sistema qué cambios de configuración va a manejar usted mismo – en este caso por no hacer nada.

  • ¿Cómo detectar móviles (iOS y Android) utilizando JSP / Java?
  • IScroll con desplazamiento nativo en un eje
  • Incluye una aplicación de escáner QR con PhoneGap
  • ¿Por qué una aplicación de teléfono muy simple utiliza plan de datos móvil?
  • ¿Qué UI usar para Cordova Android / iPhone desarrollo de aplicaciones
  • Android: Configurar onClickListener en una parte del texto de un TextView - Problema
  • ¿Qué no puedes hacer con una aplicación móvil HTML5 / Javascript que puedes hacer con una aplicación móvil nativa?
  • Inicio de sesión de Android - Mejor implementación
  • Javascript android window.onorientationchange se dispara continuamente
  • Inicie el navegador predeterminado desde el navegador de portal cautivo de Android (CaptivePortalLogin)
  • Cordova registra los tipos de archivo a 'abrir con' la lista
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.