javascript - lock - Evitar cambios de orientación en iOS Safari
orientationchange (8)
¿Es posible evitar la transición a la vista de paisaje en Safari para iOS cuando se gira el dispositivo?
iOS Safari tiene el evento "orentationchange", traté de interceptarlo y deshabilitar el comportamiento predeterminado, como este:
<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
alert("Rotate");
event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>
pero al probar la página en mi iPhone, cuando giro el dispositivo aparece la alerta, pero la vista cambia a horizontal. Parece que event.preventDefault () no detiene la rotación.
¿Hay alguna manera de bloquear este comportamiento?
Creo que para nuestro caso en el que necesitamos proporcionar una vista coherente de los datos que mostramos en la pantalla para las encuestas médicas, no se puede permitir el giro de la pantalla del dispositivo. Diseñamos la aplicación para trabajar en retrato. Por lo tanto, la mejor solución para usar es bloquearlo, lo que no se puede hacer a través del navegador, o mostrar un error / mensaje que indique que la aplicación no se puede utilizar hasta que se corrija la orientación.
La siguiente solución parece funcionar para mí en iPhone4, 5, 6 y 6+ a partir de junio de 2016.
<script>
/**
* we are locking mobile devices orientation to portrait mode only
*/
var devWidth, devHeight;
window.addEventListener(''load'', function() {
devWidth = screen.width;
devHeight = screen.height;
});
window.addEventListener(''orientationchange'', function () {
if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) {
document.body.style.width = devWidth + ''px'';
document.body.style.height = devHeight + ''px'';
document.body.style.transform = ''rotate(90deg)'';
document.body.style.transformOrigin = ''''+(devHeight/2)+''px ''+(devHeight/2)+''px'';
} else {
document.body.removeAttribute(''style'');
}
}, true);
</script>
No hay forma de forzar una orientación particular en Mobile Safari; siempre se autorrotación cuando el usuario gira su dispositivo.
Quizás pueda mostrar algo para orientaciones no admitidas que informen al usuario de que las orientaciones no son compatibles y de que deben girar el dispositivo hacia atrás para usar su aplicación web.
Se ha propuesto una spec para implementar esta funcionalidad.
Además, consulte este error de Chromium para obtener información adicional (aún no está claro si se implementará en WebKit o Chromium).
Si bien no puede evitar que el cambio de orientación surta efecto, no puede emular ningún cambio como se indica en otras respuestas.
Primero detecte la orientación o reorientación del dispositivo y, usando JavaScript, agregue un nombre de clase a su elemento de ajuste (en este ejemplo, uso la etiqueta de cuerpo).
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '''';
body.classList.add(''rotation90'');
break;
case -90:
body.classList = '''';
body.classList.add(''rotation-90'');
break;
default:
body.classList = '''';
body.classList.add(''portrait'');
break;
}
}
window.addEventListener(''orientationchange'', deviceOrientation);
deviceOrientation();
Luego, si el dispositivo es horizontal, use CSS para establecer el ancho del cuerpo a la altura de la vista y la altura del cuerpo al ancho de la ventana gráfica. Y establezcamos el origen de la transformación mientras estamos en ello.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Ahora, reoriente el elemento del cuerpo y deslícelo (tradúzcalo) a su posición.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Si es posible (lo que no creo que sea), entonces desaconsejaría encarecidamente. Los usuarios odian verse forzados a ver páginas de una manera particular. ¿Qué sucede si usan su iPhone en una base y no pueden soportarlo en modo horizontal sin desacoplarlo, o qué sucede si prefieren la versión horizontal del teclado porque las teclas son más grandes?
Si su diseño requiere una orientación particular, entonces tal vez quiera reconsiderar su diseño.
Tal vez en un nuevo futuro ...
En cuanto a mayo de 2015,
hay una funcionalidad experimental que hace eso. Pero solo funciona en Firefox 18+, IE11 + y Chrome 38+.
Sin embargo, aún no funciona en Opera o Safari.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility
Aquí está el código actual para los navegadores compatibles:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
Jonathan Snook tiene una solución a este problema. En sus diapositivas here , muestra cómo (tipo de) bloquear al retrato (ver diapositiva 54 y 55).
El código JS de esas diapositivas:
window.addEventListener(''orientationchange'', function () {
if (window.orientation == -90) {
document.getElementById(''orient'').className = ''orientright'';
}
if (window.orientation == 90) {
document.getElementById(''orient'').className = ''orientleft'';
}
if (window.orientation == 0) {
document.getElementById(''orient'').className = '''';
}
}, true);
y el CSS:
.orientleft #shell {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:160px 160px;
}
.orientright #shell {
-webkit-transform: rotate(90deg);
-webkit-transform-origin:230px 230px;
}
Traté de hacer que esto funcione para el paisaje en el iPhone, pero nunca parecía 100% correcto. Sin embargo, me acerqué al siguiente código jQueryian. Esto estaría dentro de la función de listo. También tenga en cuenta: esto fue dentro de un contexto "guardado en pantalla de inicio", y creo que alteró la posición del origen de la transformación.
$(window).bind(''orientationchange'', function(e, onready){
if(onready){
$(document.body).addClass(''portrait-onready'');
}
if (Math.abs(window.orientation) != 90){
$(document.body).addClass(''portrait'');
}
else {
$(document.body).removeClass(''portrait'').removeClass(''portrait-onready'');
}
});
$(window).trigger(''orientationchange'', true); // fire the orientation change event at the start, to make sure
Y el CSS:
.portrait {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 200px 190px;
}
.portrait-onready {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 165px 150px;
}
Espero que ayude a alguien a acercarse al resultado deseado ...