Bloquear una web según la orientación de nuestro dispositivo puede resultar una bobada técnica, pero tremendamente útil en determinados casos.
Hoy os contamos cómo puede hacerse de forma fácil y rápida. Con un par de líneas en html y otras pocas para css, mantener la misma estética o enseñar un mensaje en nuestra página web cuando ponemos el móvil en horizontal será coser y cantar.
HTML necesario para bloquear nuestra página web
<div id="landscape">
<div>
<p>
<img src="https://www.miweb.com/image.jpg" alt="Imagen" /><br />
¡Gira el móvil!<br />
<span>Por favor</span>
</p>
</div>
</div>Sobra decir que debes cambiar la imagen de ejemplo por una tuya personalizada, o el texto que quieras.
El objetivo es mostrar una capa al usuario para que cuando gire el móvil, algo (una imagen en nuestro caso, un icono o un texto) que le indique que vuelva a mover su dispositivo a su posición original, u otro mensaje personalizado.
Lo único que necesitamos para bloquear nuestra web es un div intermedio con la información que queremos mostrar al usuario cuando gire el móvil. Es conveniente poner este html al comienzo del body para que sea el primer elemento al cargarse, manteniéndolo invisible.
CSS necesario y su media query
#landscape {
display: none;
z-index: -100;
}
@media (max-width: 768px) and (orientation: landscape) {
#landscape {
display: flex;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #f2f2f2;
z-index: 999999;
width: 100%;
height: 100vh;
font-size: 120%;
align-items: center;
justify-content: center;
}
}¿Has necesitado alguna vez hacer algo parecido? ¿Crees que es útil? Cuéntanos en qué casos tuviste que implementarlo.
Puedes encontrar más información en: Code Boxx