Yo suelo aplicar otra solución usando media-queries.
Código CSS:
Ver original@media (orientation: portrait) {
#portrait {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
}
Esto funciona para cuando el dispositivo esté en horizontal. Si lo necesites para vertical, entonces cambia
portrait por
landscape.
Dado que este en principio también va a afectar a navegadores de escritorio, ya que la consulta portrait es verdadera cuando el ancho del navegador es igual o inferior o su alto —o el alto igual o mayor que su ancho— lo mejor sería, en vez de crear el HTML necesario para #portrait, crearlo mediante JavaScript si el userAgent es un móvil. Yo usualmente hago algo así:
Código Javascript
:
Ver originalif ( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// crear elemento #portrait con un texto avisando de que tiene que girar el dispositivo
}
Lo bueno de esto es que se activa siempre que el usuario gire el dispositivo o venga ya con el dispositivo girado. Y si el usuario no tiene JavaScript activado seguirá viendo el sitio con normalidad.