Estoy construyendo un sitio web específicamente para dispositivos móviles. Hay una página en particular que se ve mejor en modo horizontal.
¿Hay alguna manera de detectar si el usuario que visita esa página la está viendo en modo vertical y, de ser así, mostrar un mensaje que informe al usuario que la página se ve mejor en modo horizontal? Si el usuario ya lo está viendo en modo horizontal, no aparecerá ningún mensaje.
Básicamente, quiero que el sitio detecte la orientación de la ventana gráfica, si la orientación es vertical , luego muestre un mensaje de alerta que informe al usuario que esta página se ve mejor en modo horizontal .
if(window.innerHeight > window.innerWidth){ alert("Please use Landscape!"); } jQuery Mobile tiene un evento que maneja el cambio de esta propiedad... si desea advertir si alguien rota más tarde - cambio de orientationchange
Además, después de buscar en Google, echa un vistazo a window.orientation (que creo que se mide en grados...)
EDITAR : en dispositivos móviles, si abre un teclado, lo anterior puede fallar, por lo que puede usar screen.availHeight y screen.availWidth , que proporciona la altura y el ancho adecuados incluso después de abrir el teclado.
if(screen.availHeight > screen.availWidth){ alert("Please use Landscape!"); }También puede usar window.matchMedia , que uso y prefiero ya que se parece mucho a la sintaxis CSS:
if (window.matchMedia("(orientation: portrait)").matches) { // you're in PORTRAIT mode } if (window.matchMedia("(orientation: landscape)").matches) { // you're in LANDSCAPE mode }Probado en iPad 2.
David Walsh tiene un enfoque mejor y directo.
// Listen for orientation changes window.addEventListener("orientationchange", function() { // Announce the new orientation number alert(window.orientation); }, false);Durante estos cambios, la propiedad window.orientation puede cambiar. Un valor de 0 significa vista vertical, -90 significa que el dispositivo está girado apaisado hacia la derecha y 90 significa que el dispositivo está girado apaisado hacia la izquierda.