85

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 así, pero ¿se puede hacer esto para un sitio web?

javascript html mobile-browser

— coure2011
fuente

3

Buena pregunta, pero apuesto a que la respuesta es "No es posible", aunque puedes hacer una especie de trampa: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Realmente no. Puedes falsificarlo usando transformaciones CSS, pero es feo, y no creo que haya una manera de saber si está al revés en Android. Estoy bastante seguro de que esto se ha discutido aquí antes.

— Dagg Nabbit

1

¿Es posible forzar que el sitio web tenga un ancho mínimo: 320 px? por lo que si el tamaño de la pantalla es de menor resolución, el usuario deberá desplazarse para ver el sitio completo. ¿O puedo ampliar el ancho de 240px a contenido de 320px?

— coure2011

No estoy seguro de lo útil que podría ser este enlace para usted, pero las funciones más recientes de [enero de 2020] sugieren una nueva API para el bloqueo de orientación de W3C w3c.github.io/screen-orientation

— Sarath Sajan

117

@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 tienes control sobre el usuario que mueve la orientación, sin embargo, al menos puedes enviarles un mensaje. Este ejemplo ocultará la envoltura si está en modo vertical y mostrará el mensaje de advertencia y 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 el crédito a @Golmaal.

Actualizar

He estado trabajando mucho con Cordova recientemente y resulta que PUEDES controlarlo cuando tienes acceso a las funciones nativas.

Otra actualización

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

— Jason Sebring
fuente

¡me alegró el día! este es un script realmente útil para forzar el modo horizontal en dispositivos pequeños y poner un mensaje agradable.

— dhruvpatel

sin embargo, obtuviste la mayor parte del crédito;) + 1d por tu respuesta bien descrita y @Golmaal ..

— Hitesh Misro

Realmente útil, gracias! Vale la pena señalar que esto no parece funcionar si lo coloca en una hoja de estilo separada.

— Mmm

Su respuesta es mejor que la que hace referencia. Proporciona una solución real y recomienda una advertencia de fácil implementación en lugar de algo más creativo y problemático. La otra "respuesta" podría haberlo inspirado, pero fue más o menos simplemente preguntarse en voz alta. Hubiera sido mejor como comentario que mencionara la existencia de la orientationpropiedad de grupo condicional.

— Vince

46

Mientras yo mismo estaría esperando una respuesta aquí, 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}
}

— Golmaal
fuente

35

Pruebe esto 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>

Expandir fragmento

Esto gestionará automáticamente la rotación uniforme.

— Sr. A
fuente

7

Inteligente, pero en realidad no funciona. Gran parte de la página es inaccesible cuando se gira, porque solo se gira el contenido y no el navegador real.

— Graham

2

Esto rompería cualquier animación y probablemente destruiría la capacidad de respuesta móvil de la página.

— Wissam El-Kik

2

Tuve que jugar con los anchos 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%);
    }
  }
}

— Kraken
fuente

buena idea ... ¿algún artefacto / ruido al cambiar entre retrato / paisaje?

— hko

obligando al sitio web a mostrarse solo en modo horizontal

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