forzando al sitio web a que se muestre en modo horizontal solo

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

Mientras yo mismo estaría esperando aquí por 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 2

@Golmaal realmente respondió esto, sólo 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, pero 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.

actualización

He estado trabajando con Córdoba mucho recientemente y resulta que se puede controlar cuando se tiene acceso a las funciones nativas.

otra actualización

Así que después de la liberación de Córdoba es realmente terrible en el final. Es mejor usar algo como React Native si quieres JavaScript. Es realmente sorprendente y sé que no es una web pura, pero falló.

Answer 3

Trate Puede ser más apropiado para usted

#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 va a controlar automáticamente, incluso la rotación esto.

Answer 4

que tenía que jugar con las anchuras de mis principales envases:

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