Detectar la rotación del teléfono Android en el navegador con JavaScript

Sé que en Safari en un iPhone puedes detectar la orientación de la pantalla y el cambio de orientación escuchando el onorientationchangeevento y consultando window.orientationel ángulo.

¿Es esto posible en el navegador de los teléfonos Android?

Para ser claros, pregunto si JavaScript puede detectar la rotación de un dispositivo Android ejecutándose en una página web estándar. Es posible en un iPhone y me preguntaba si se podría hacer en teléfonos Android.

Jan 01 '70 08:01 philnash

El comportamiento real entre diferentes dispositivos es inconsistente . Los eventos de cambio de tamaño y orientación pueden activarse en una secuencia diferente con frecuencia variable. Además, algunos valores (por ejemplo, ancho de pantalla y orientación de ventana) no siempre cambian cuando se espera. Evite el ancho de pantalla : no cambia al girar en iOS.

El enfoque confiable es escuchar los eventos de cambio de tamaño y orientación (con algunas encuestas como medida de seguridad) y eventualmente obtendrá un valor válido para la orientación. En mis pruebas, los dispositivos Android ocasionalmente no activan eventos cuando giran 180 grados completos, por lo que también incluí un setInterval para sondear la orientación.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

Aquí están los resultados de los cuatro dispositivos que probé (perdón por la tabla ASCII, pero parecía la forma más fácil de presentar los resultados). Aparte de la coherencia entre los dispositivos iOS, existe mucha variedad entre dispositivos. NOTA: Los eventos se enumeran en el orden en que se activaron.

|=================================================== =============================|
| Dispositivo | Eventos despedidos | orientación | ancho interior | ancho de pantalla |
|=================================================== =============================|
| iPad 2 | cambiar el tamaño | 0 | 1024 | 768 |
| (al paisaje) | cambio de orientación | 90 | 1024 | 768 |
|----------------+-------------------+------------ -+------------+--------------|
| iPad 2 | cambiar el tamaño | 90 | 768 | 768 |
| (al retrato) | cambio de orientación | 0 | 768 | 768 |
|----------------+-------------------+------------ -+------------+--------------|
| iPhone 4 | cambiar el tamaño | 0 | 480 | 320 |
| (al paisaje) | cambio de orientación | 90 | 480 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| iPhone 4 | cambiar el tamaño | 90 | 320 | 320 |
| (al retrato) | cambio de orientación | 0 | 320 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| Teléfono droide | cambio de orientación | 90 | 320 | 320 |
| (al paisaje) | cambiar el tamaño | 90 | 569 | 569 |
|----------------+-------------------+------------ -+------------+--------------|
| Teléfono droide | cambio de orientación | 0 | 569 | 569 |
| (al retrato) | cambiar el tamaño | 0 | 320 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| Samsung Galaxia | cambio de orientación | 0 | 400 | 400 |
| Tableta | cambio de orientación | 90 | 400 | 400 |
| (al paisaje) | cambio de orientación | 90 | 400 | 400 |
| | cambiar el tamaño | 90 | 683 | 683 |
| | cambio de orientación | 90 | 683 | 683 |
|----------------+-------------------+------------ -+------------+--------------|
| Samsung Galaxia | cambio de orientación | 90 | 683 | 683 |
| Tableta | cambio de orientación | 0 | 683 | 683 |
| (al retrato) | cambio de orientación | 0 | 683 | 683 |
| | cambiar el tamaño | 0 | 400 | 400 |
| | cambio de orientación | 0 | 400 | 400 |
|----------------+-------------------+------------ -+------------+--------------|

Jul 06 '2011 21:07 two-bit-fool

Para detectar un cambio de orientación en un navegador de Android, adjunte un detector al evento orientationchangeo resizeen window:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Verifique la window.orientationpropiedad para determinar en qué dirección está orientado el dispositivo. Con teléfonos Android, screen.widtho screen.heighttambién se actualiza a medida que se gira el dispositivo. (Este no es el caso del iPhone).

Feb 21 '2010 23:02 jb.

La excelente respuesta de two-bit-fool proporciona todos los antecedentes, pero permítanme intentar un resumen conciso y pragmático de cómo manejar los cambios de orientación en iOS y Android :

Si solo le importan las dimensiones de la ventana (el escenario típico) , y no la orientación específica:
- Manejar resizeúnicamente el evento.
- En tu controlador, actúa en window.innerWidthy window.InnerHeightsolo.
- NO lo use window.orientation: no estará actualizado en iOS.

Si SÍ le importa la orientación específica :
- Maneje solo el resizeevento en Android y solo el orientationchangeevento en iOS.
- En su controlador, actúe sobre window.orientation(y window.innerWidthy window.InnerHeight)

Estos enfoques ofrecen ligeros beneficios en comparación con recordar la orientación anterior y comparar:

El enfoque de solo dimensiones también funciona cuando se desarrolla en navegadores de escritorio que de otro modo pueden simular dispositivos móviles, por ejemplo, Chrome 23 ( window.orientationno está disponible en navegadores de escritorio).
no es necesaria una variable de nivel de contenedor de función de nivel de archivo global/anónimo.

Dec 10 '2012 16:12 mklement0

Siempre puedes escuchar el evento de cambio de tamaño de la ventana. Si, en ese caso, la ventana pasó de ser más alta que ancha a más ancha que alta (o viceversa), puede estar bastante seguro de que la orientación del teléfono acaba de cambiar.

Oct 30 '2009 17:10 Joel Mueller