Evitar cambio de orientación en iOS Safari

¿Es posible evitar la transición a la vista horizontal en Safari para iOS cuando se gira el dispositivo?Evitar cambio de orientación en iOS Safari

iOS Safari tiene el evento "orentationchange", me trató de interceptarlo y desactivar el comportamiento predeterminado, como esto:

<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 gire el dispositivo de la alerta se muestra, pero la vista cambia a paisaje. Parece que event.preventDefault() no detiene la rotación.

¿Hay alguna manera de bloquear este comportamiento?

Fuente

2011-03-14 Davide Gualano

relacionadas: http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application – xdhmoore

Lea la pregunta enlazada por @xdhmoore. Vale la pena además de este. – Boaz

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 informe al usuario de que las orientaciones no son compatibles, y que necesitan girar el dispositivo hacia atrás para usar su aplicación web.

Fuente

2011-03-14 12:27:53 BoltClock

-3

Si es posible (lo que no creo que sea), entonces desaconsejaría enfáticamente. 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 quizás quiera replantear su diseño.

Fuente

2011-03-14 12:31:54 GordonM

La aplicación web que estoy creando se dirige a usuarios que caminan a pie por la ciudad, así que pensé que la vista de retrato predeterminada podría ser la forma más natural de experimentarla. Tendré que pensar en diferentes escenarios, gracias por señalarme esto. –

+12

Si su aplicación utiliza eventos de orientación del dispositivo, por ejemplo, no le gustaría que se autorrotee cuando el usuario mueve el dispositivo demasiado en una dirección, para un juego que sería muy molesto. –

este tipo de comentarios son tan arrogantes. la mayoría de los usuarios que no son nerds solo usan estas opciones de "vista personalizada" porque la página web que están mirando tiene un uso y diseño horribles o una letra pequeña, etc ... simplemente decir que los usuarios quieren flexibilidad simplemente no es muy útil. una adición de metaetiqueta para evitar el contenido auto-rotativo está garantizada: las aplicaciones pueden hacerlo ... – tim

Jonathan Snook tiene una solución a este problema. En sus diapositivas here, muestra cómo (tipo de) bloquear a retrato (ver diapositiva 54 y 55).

El código JS de las 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; 
}

Me trataron de conseguir este funcionamiento para paisaje en el iPhone, pero nunca miraron 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; 
}

la esperanza de que ayude a alguien acercarse al resultado deseado ...

Fuente

2011-08-15 05:35:55 fisherwebdev

¿Has intentado cambiar los orígenes de las transformaciones a 0,0? – tim

Yo voté esto, solo porque me hizo reír mucho. ¡Ingenioso! – Westie

Tuve esta idea, pero no estaba seguro si funcionaría ... me alegra saber que sí: D esta debería ser la respuesta aceptada – nevelis

Un spec para implementar esta funcionalidad se ha propuesto.

También, vea this Chromium bug para obtener información adicional (todavía no está claro si se implementará en WebKit o Chromium).

Fuente

2012-03-05 06:09:55

Creo que en nuestro caso en el que necesitamos proporcionar una vista coherente de los datos que mostramos en la pantalla para 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.

Fuente

2012-05-16 17:54:05

Tal vez en un nuevo futuro ...

Como para mayo de 2015,

no es una funcionalidad experimental que hace eso. Pero solo funciona en Firefox 18+, IE11 + y Chrome 38+.

Sin embargo, todavía no funciona en Opera o Safari.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

Este es el código actual de los navegadores compatibles:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 

lockOrientation("landscape-primary");

Fuente

2015-05-13 18:37:19

La siguiente solución parece trabajar 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>

Fuente

2016-06-03 22:23:02 allenhwkim

Si bien no puede evitar que el cambio de orientación entre en vigor puede emular ningún cambio como se indica en oth er respuestas.

Primero detecte la orientación o reorientación del dispositivo y, usando JavaScript, agregue un nombre de clase a su elemento de envoltura (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();

Entonces, si el dispositivo es paisaje, uso CSS para ajustar el ancho del cuerpo a la altura de visualización y la altura del cuerpo a la anchura de la vista. 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 (traduzca) en su posición.

body.rotation-90 { 
    transform: rotate(90deg) translateY(-100%); 
} 
body.rotation90 { 
    transform: rotate(-90deg) translateX(-100%); 
}

Fuente

2016-11-27 09:01:18

Evitar cambio de orientación en iOS Safari

Respuesta

Cuestiones relacionadas