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?

@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ó.

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}
}

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>

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

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%);
    }
  }
}