3

Es decir, que al entrar al sitio web, si el usuario tiene el móvil en modo horizontal no pueda ver el contenido de la página web hasta que voltee el móvil en posición vertical. He visto unos ejemplos en la red, pero ignoro cómo se logra ese efecto, ya que tengo una página web a la cual me gustaría configurar para que se vea sólo en modo vertical o modo retrato (Portrait).

Muchas gracias por sus respuestas de antemano, y saludos.

3 respuestas 3

6

Debes utilizar Media Queries

Debes utilizar las Media Queries para lograr el efecto deseado.

Aclaratoria: debes colocar en tu archivo HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Entre las etiquetas <head></head> para que las *Media Queries surtan efecto en tu dispositivo.

En ella debes especificar si la orientación del dispositivo es vertical u horizontal.

Posición horizontal:

@media screen and ( orientation: landscape ) {
    .selector {
        ...
    }
}

Posición Vertical:

@media screen and ( orientation: portrait ) {
    .selector {
        ...
    }
}

Sin embargo, debes también, establecer una anchura máxima donde se mostrará la página Web para evitar que se aplique dicho efecto en una pantalla de PC o tablet.

Por ejemplo:

@media screen and (max-width: 780px) and ( orientation: landscape ) {
    .selector {
        ...
    }
}

Tome en cuenta que la medida de 780px es la anchura máxima que puse en este ejemplo, pero puedes colocar otra anchura. Sin embargo, se aproximada mucho mejor.

Vamos a la práctica

Teniendo claro lo anteriormente expuesto en esta publicación y citando la inquietud de tu pregunta:

¿Cómo forzar a una página web para que se vea sólo si el móvil está en vertical?

Simplemente se aplica lo que sigue más abajo:

@media screen and (max-width: 780px) and (oriantation: landscape) {
    body {
        display: none;
    }
}

Ahora, vamos a realizar una demostración:

/* Agregaremos algo de estilo para visualizar el 
   elemento sobre el que vamos a realizar la prueba */

.app {
  background-color: black;
  color: white;
  font-size: 2rem;
  padding: 40px;
  text-align: center;
}


/* Esta es la parte que nos interesa */

@media screen and (max-width: 780px) and (orientation: landscape) {
  .app {
    display: none;
  }
}
<main class="app">Texto del elemento</main>

Importante: intente colocar su navegador en modo smartphone y cambie la orientación para que pueda visualizar el efecto. O también, pruébelo en su dispositivo y visualice los resultados.

Este es otro ejemplo sin una anchura restringida:

/* Agregaremos algo de estilo para visualizar el 
   elemento sobre el que vamos a realizar la prueba */

.app {
  background-color: black;
  color: white;
  font-size: 2rem;
  padding: 40px;
  text-align: center;
}


/* Esta es la parte que nos interesa */

@media screen and (orientation: landscape) {
  .app {
    display: none;
  }
}
<main class="app">Texto del elemento</main>

Actualización

Además, podemos indicarle al usuario que debe voltear el dispositivo o que lo ponga en modo vertical.

Existen muchas formas de hacerlas, como por ejemplo, la que sigue más abajo

Esta vez utilizaremos un pseudo-elemento:

/* Agregaremos algo de estilo para visualizar el 
   elemento sobre el que vamos a realizar la prueba */

.app {
  background-color: black;
  color: white;
  font-size: 2rem;
  padding: 40px;
  text-align: center;
}


/* Esta es la parte que nos interesa */
@media screen and (orientation: landscape) {
  /* Cubre toda la pantalla del dispositivo */
  .mensaje {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    /* Con esto ajustamos la posición del texto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Un color de fondo */
    
    background-color: white;
    /* Debemos superponerlo */
    z-index: 1000;
  }
  
  /* El texto que vamos a mostrar */
  .mensaje::before {
    content: "Voltee su dispositivo";
    font-size: 2rem;
  }
  
  .app {
    display: none;
  }
}
<main class="app">Texto del elemento</main>
<div class="mensaje"></div>

Es importante que lea los comentarios insertados en el código.

2
  • Interesante la respuesta que planteas, David. Ya lo estoy implementando en mi código y quedó al 100%. Ahora ya solo falta poner un mensaje que le diga al usuario que voltee su móvil en vertical para poder ver la página. ¿Eso cómo se haría? el 19 ene. 2021 a las 16:29
  • Hola @MauroMartin. Lo voy a implementar en una actualización de esta publicación en un rato. el 19 ene. 2021 a las 23:10
3

Tras haber realizado pruebas de ensaye y error, finalmente pude hacer que el contenido de mi web se vea sólo cuando el teléfono se vea en posición vertical. El por qué hacerlo de esta manera es más que nada porque la responsive de mi web la diseñé sólo para que sea vea bajo esa posición del móvil y no precisamente en el modo horizontal, además de que optimizarlo para que se vea igual en horizontal lo noté bastante engorroso y ya no le quiero seguir moviéndole más a la web.

En mi caso bastó simplemente con utilizar el código CSS propuesto por David. Y me funcionó, aunque a medias, ya que si bien ya no se veía la página al voltear en horizontal, lamentablemente se arrojaba una página en blanco, por lo que, de nuevo habría que echar mano de CSS para hacer que salga una frase que le advierta al usuario de que el contenido de la página sólo era visible si volteaba su teléfono en modo retrato o portrait.

En resumen, hice algo así como esto (para el que igual se quedó atorado y quiera poner alguna limitación "técnica" a su web).

/* Agregaremos algo de estilo para visualizar el 
   elemento sobre el que vamos a realizar la prueba */

.app {
  background-color: black;
  color: white;
  font-size: 2rem;
  padding: 40px;
  text-align: center;
}


/* Esta es la parte que nos interesa */
@media screen and (max-width: 780px) and (orientation: landscape) {
  * {
      background-color: black;
   }
  .app {
    display: none;
  }

  .twin1 {
    font-weight: 100;
    font-size: 20px;
    text-align: center;
    color: white;
    padding-top: 20px;
  }
  
  .twin1::after {
    Content: "Voltee su móvil en modo vertical para ver el contenido.";
  }
}
<DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<main class="app">Texto del elemento <br>
</main>
       <span class="twin1"></span>
</body>
</html>

Todo esto sin necesidad de usar JS, ya que en Javascript se me complicó mucho la cosa, además de que buscaba que mi web no tenga demasiados elementos JS incrustados, aunque igual se agradece el aporte que hace lo mismo, pero en este caso no me sirvió de mucho.

El resultado al usar puro CSS3 fue algo parecido a lo mostrado al ejecutar el código aquí, pero en mi web quedó más o menos así:

introducir la descripción de la imagen aquí

Eso sí, recomiendo que suban la resolución del max-width a 900px mínimo, dado que si le bajan demasiado es probable que no funcione del todo bien, dado que muchos equipos teléfonos modernos usan resoluciones de pantalla bastante grandes. Yo lo experimenté con un equipo Samsung Galaxy A10s, cuya resolución va más allá de los 800px. Igual creo que hay también una opción para detectar si la visita a una web se hace desde una computadora o un dispositivo, pero ya no recuerdo en qué página lo vi. Pero bueno, espero con esto poder ayudar a alguien más, ya que ni en Google pude encontrar solución mejor.

Muchas gracias a todos. En lo pueda ayudar, ya saben.

1

Puedes obtener el width de la pantalla y comprobar si es menor a una cantidad, para comprobar si se tiene el dispositivo en horizontal o vertical

Usaremos regExp para validar si el dispositivo en el que está es un dispositivo móvil

Podremos saber cuándo se cambia la vista del móvil con window.onresize

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};
if (screen.width > 600) {
  if (window.mobileCheck()) { document.body.innerHTML = "El móvil tiene que estar en modo retrato" };
} else {
    document.body.innerHTML = "modo retrato"
}

window.onresize = () => {
  if (screen.width > 600) {
    if (window.mobileCheck()) { document.body.innerHTML = "El móvil tiene que estar en modo retrato" };
  } else {
      document.body.innerHTML = "modo retrato"
  }
};
<p>Hello world</p>


También puedes comprobar si el ancho es menor que el alto, obteniendo el alto con screen.height

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};
if (screen.width > screen.height) {
  if (window.mobileCheck()) { document.body.innerHTML = "El móvil tiene que estar en modo retrato" };
} else {
    document.body.innerHTML = "modo retrato"
}

window.onresize = () => {
  if (screen.width > screen.height) {
    if (window.mobileCheck()) { document.body.innerHTML = "El móvil tiene que estar en modo retrato" };
  } else {
      document.body.innerHTML = "modo retrato"
  }
};
<p>Hello world</p>

4
  • ¿No sería mejor comprobar si ancho en menor que alto para saber que está en vertical? Con CSS se podría girar todo el contenido cuando el móvil esté en horizontal, forzando al usuario a girar. De cualquier forma, es buena respuesta. +1
    – Triby
    el 18 ene. 2021 a las 3:15
  • 1
    Gracias por la recomendación @Triby ya he hecho la modificación, lo de CSS no lo creo necesario ya que el colega David lo ha respondido ya. el 18 ene. 2021 a las 7:20
  • Hola @anythingg, creo que ambas respuestas se complementan entre sí. Es una respuesta interesante. el 18 ene. 2021 a las 7:51
  • Pues que ya implementé ambas formas, pero tengo mis dudas: Sobre el CSS, ¿cómo pongo un mensaje para que el usuario lo vea cada vez que tenga su móvil en horizontal,ya que al hacer la prueba al voltear el movil en horizontal me sale todo en blanco? Y sobre el JS, ¿al quitar el elemento dentro de ELSE, ya no queda igual? Ya que al implementarlo sobre mi código ésta se queda con la frase "modo retrato". Y si quito lo que está en ELSE, sigue respondiendo cuando volteo el móvil en horizontal, pero ya no hace lo mismo en viceversa. ¿Es esto normal? ¿Cómo complementarlo con el CSS? el 19 ene. 2021 a las 17:11

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.