Ich möchte meine Website nur im Querformat anzeigen. Ist dies möglich? Es spielt keine Rolle, wie das Gerät in der Hand des Benutzers ausgerichtet ist, aber die Website befindet sich immer im Querformat. Ich habe gesehen, dass die iPhone-Anwendung so funktioniert, aber kann dies für eine Website durchgeführt werden?

@ Golmaal hat das wirklich beantwortet, ich bin nur ein bisschen ausführlicher.

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

Sie haben keine Kontrolle darüber, wie der Benutzer die Ausrichtung verschiebt, können ihn jedoch zumindest benachrichtigen. In diesem Beispiel wird der Wrapper im Hochformat ausgeblendet und die Warnmeldung angezeigt. Anschließend wird die Warnmeldung im Querformat ausgeblendet und das Hochformat angezeigt.

Ich denke nicht, dass diese Antwort besser ist als @Golmaal, nur ein Kompliment. Wenn Ihnen diese Antwort gefällt, geben Sie @Golmaal die Gutschrift.

Aktualisieren

Ich habe in letzter Zeit viel mit Cordova gearbeitet und es stellt sich heraus, dass Sie es steuern können, wenn Sie Zugriff auf die nativen Funktionen haben.

Ein weiteres Update

Nach der Veröffentlichung von Cordova ist es am Ende wirklich schrecklich. Es ist besser, so etwas wie React Native zu verwenden, wenn Sie JavaScript möchten. Es ist wirklich erstaunlich und ich weiß, dass es kein reines Web ist, aber das reine Web-Erlebnis auf Mobilgeräten ist gescheitert.

Während ich selbst hier auf eine Antwort warten würde, frage ich mich, ob dies über CSS möglich ist:

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

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

Versuchen Sie dies. Es ist möglicherweise besser für Sie geeignet

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

Dadurch wird automatisch eine gleichmäßige Drehung verwaltet.

Ich musste mit den Breiten meiner Hauptcontainer spielen:

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