[SOLUCIONADO] Evitar giro del navegador

[KatonSP]

Buenas, estoy desarrollando una web para smartphone y no quiero que el usuario pueda girar el navegador porque me descoloca toda la web, ¿Hay alguna manera de evitarlo? He buscado información y solo he encontrado para desactivarlo a través del propio smartphone pero no desde el navegador.

Saludos.

[Malenko]

Lo ideal sería que tu web se adaptara al usuario y no que el usuario se tenga que adaptar a ti. Creo que tendrías que darle un vistazo a los conceptos de diseño adaptativo ;)

[KatonSP]

¿Y hay alguna manera de saber si el usuario a girado la pantalla?

[KatonSP]

Ya he resuelto mi problema, he creado un metodo de escucha para saber si cambia el tamaño de la pantalla.

Por si alguien lo necesita dejo el código.

Código HTML:

screenWidth = $(window).width();
screenHeight = $(window).height();
               
               setInterval(function () {
                           if ($(window).width() !== screenWidth || $(window).height() !== screenHeight) {
                           screenWidth = $(window).width();
                           screenHeight = $(window).height();
                           
                           alert('entra');                           
                           }
                }, 50);

Saludos!

[Malenko]

Y si el usuario cuando comienza a ver tu web ya tiene el navegador "girado"?

[KatonSP]

Da igual porque según el tamaño de la ventana posicionaba los divs y las imágenes, el problema que tenía antes era que se quedaba con la configuración del tamaño antes de girar la pantalla. Lo que hago ahora es recolocar los elementos si cambia el tamaño del navegador.

Saludos!

[Tecna]

Buenas,

hacer un serInterval y más con un intérvalo de tiempo tan reducido no es la mejor opción para dispositivos móviles porque producirá un consumo de recursos muy elevado e innecesario. Sería mejor controlarlo con el evento onresize.

[pzin]

Yo suelo aplicar otra solución usando media-queries.

Código CSS:

@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:

if ( /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.