javascript - only - force landscape html

obligando al sitio web a mostrar solo en modo horizontal

Question

Quiero mostrar mi sitio web solo en modo horizontal, ¿es posible? No importa cuál sea la orientación del dispositivo en la mano del usuario, pero el sitio web siempre estará en modo horizontal. He visto que la aplicación de iPhone funciona de esa manera, pero ¿se puede hacer esto para un sitio web?

Answer 1

@Golmaal realmente respondió esto, solo estoy siendo un poco más detallado.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

No tiene control sobre el usuario moviendo la orientación, sin embargo, al menos puede enviar un mensaje. Este ejemplo ocultará el contenedor si está en modo retrato y mostrará el mensaje de advertencia, luego ocultará el mensaje de advertencia en modo horizontal y mostrará el retrato.

No creo que esta respuesta sea mejor que @Golmaal, solo un cumplido. Si te gusta esta respuesta, asegúrate de darle crédito a @Golmaal.

Actualizar

He trabajado mucho con Cordova recientemente y resulta que PUEDES controlarlo cuando tienes acceso a las características nativas.

Otra actualización

Entonces, después de liberar a Córdoba, es realmente terrible al final. Es mejor usar algo como React Native si quieres JavaScript. Es realmente sorprendente y sé que no es una web pura, sino que la experiencia web pura en dispositivos móviles falló.

Answer 2

Mientras que yo mismo estaría esperando aquí una respuesta, me pregunto si se puede hacer a través de CSS:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

Answer 3

Tuve que jugar con el ancho de mis contenedores principales:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

Answer 4

Prueba esto Puede ser más apropiado para ti

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Esto administrará automáticamente incluso la rotación.