Hoy os voy a compartir una solución para «bloquear» una página web cuando ponemos el móvil en horizontal. Si te fijas digo «bloquear» porque realmente no existe una forma compatible con todos los navegadores y dispositivo para hacer esto con Jquery pero si existe un pequeño truco o apaño con CSS. Tendremos un resultado como este:
Es decir realmente lo que vamos a hacer es mostrar una capa al usuario para cuando gire el móvil mostrarle un icono o un texto que le indique que vuelva a mover su dispositivo.
A mi es la solución que mejor me ha funcionado. Puedes ver un caso real en https://www.destacaimagen.com/ que es mi agencia de diseño y desarrollo.
Espero que te sirva este código para tus proyectos:
HTML
Lo único que necesitamos es un div con la información que queremos mostrar al usuario cuando gira el móvil. Te recomiendo que este div esté al comenzar el body. Ya que así será de los primeros elementos que se cargue aunque no este visible.
¡Ojo! Sustituye la el atributo src por el de tu imagen
|
1 2 3 4 5 6 7 8 |
<div id="landscape"> <div> <p> <img src="cambia la ruta de la imagen" alt=""><br> ¡Gira el móvil! <br><span>Please</span> </p> </div> </div> |
CSS
Con la primera parte de este código ocultaremos este div. Luego añadiremos una @media query para indicar cuando se debe de mostrar el div y las propiedades de este.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#landscape { display: none; z-index: -100; } @media(max-width: 768px) and (orientation: landscape){ #landscape { display: flex; position: fixed; top: 0; bottom: 0px; right: 0px; left: 0px; background: #f2f2f2; z-index: 990000; width: 100%; height: 100vh; font-size: 120%; align-items: center; justify-content: center; } } |
¿Y si utilizo WordPress?
Cómo puedo bloquear mi web en un móvil horizontal
Realmente el código es el mismo. Pero tienes que saber donde incluirlo. Pero ten cuidado sobre todo al editar el archivo header.php podrías cargarte tu web…
- Subimos la imagen que queremos a medios y pegamos la dirección que WordPress no da.
- Vamos a apariencia / editor / abrimos el archivo header.php y lo pegamos nuestro html después de la etiqueta <body>
- Vamos a personalizar / css personalizado y pegamos nuestro CSS.
Te dejo un vídeo para que veas como se hace:
Funciona muy bien, pero tengo un problema, en la web hay videos que si deseo que se puedan ver en Lanscape para verlos de mayor tamaño. Entonces el aviso de gira el móvil, me aparece con todo. No se puede discriminar la reprodcción de videos?
Hola Julian. No. Es imposible, ya que el bloqueo depende del tamaño de la pantalla y no del contenido.