Estoy escribiendo un sitio web dirigido al iPhone. Me gustaría establecer una clase en el elemento <body> cuando la orientación del iPhone cambia (es decir, cuando el usuario enciende el teléfono en modo horizontal y/o vertical).¿Cómo puedo detectar cuando el iPhone entra en modo apaisado a través de JavaScript? ¿Hay algún evento para esto?
¿Puedo detectar este cambio mediante JavaScript? ¿Hay algún evento para esto?
Sí, a través del evento onorientationchange y la propiedad window.orientation.
se puede comprobar el ancho del cuerpo del documento. Si de repente se vuelve más pequeño o más grande, sabes lo que sucedió. Puedes medirlo con un intervalo.
window.setInterval(function() {
// check body with here and compare with global variable that holds the last measurement
// you may set a boolean isLandscape = true if the body with became bigger.
}, 50);
No estoy del todo seguro de que funcione: 'document.body.clientWidth' parece devolver el mismo valor en vertical y horizontal (al menos en la página en la que estoy trabajando). Sin embargo, puede haber otras propiedades que pueda verificar. –
Tendría que usar algo como getComputedStyle, y pedir el ancho calculado de la etiqueta de cuerpo. Si eso no funciona en el safari, prueba currentStyle. También asegúrese de que la etiqueta del cuerpo reciba un ancho = 100%. – Thanks
Sí, eso podría funcionar. Es solo que la noción de dimensiones de Mobile Safari parece un tanto abstracta, debido a la escala que tiene con la pantalla del iPhone. Al parecer, no obtiene más ancho de píxel (en términos de su diseño) cuando se vuelve horizontal, aunque haya más píxeles físicos disponibles. No he comprobado realmente a través de qué vuelven las diversas propiedades. –
También es una solución elegante. – Thanks
FYI Se ha eliminado el requisito de inicio de sesión para la Biblioteca de referencia de Safari de Apple. –
@Pullets Forever - ah, excelente, gracias. Actualizado en consecuencia. –