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.
- Trabajadores web en navegadores móviles
- ¿Limpiar la caché de la aplicación mediante programación?
- SMS raw pdu en Android
- Elementos relativamente posicionado en desplazable absolutamente posicionado div "retraso" en el desplazamiento
- No se puede implementar la aplicación mediante Device Chooser después de actualizar Android Studio a 1.4
-
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.
-
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.
-
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ó.
-
Absorbió mi orgullo, luego decidió seguir corriendo en una pared de ladrillo debido al orgullo, entonces realmente absorbió mi orgullo y publicó aquí.
HALP.
- Abrir el menú de ServiceMode por programa en Android
- Mensaje de error: emulator-arm.exe ha dejado de funcionar
- Mezcla de cordova y actividades nativas en Android
- Excepción al modificar el nivel de acceso de escritura de cubo con Kii Cloud SDK
- ¿Cómo se simula la memoria baja en el emulador de Android?
- Impresión de jquery móvil (phonegap) aplicación en android
- ¿Es posible pasar parámetros url a google play? (Pasar cadenas de consulta)
- La aplicación de Android no aparece en la lista de aplicaciones recientes
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.
- Boss dice: "Necesitamos una aplicación de IPhone", ¿Qué frameworks son similares a Firefox, JQuery, plantillas y enlaces de datos en un iPhone?
- 1×1 Android Widget muestra como widget 2×2 en la pantalla WXGA720