Frage erzwingt, dass die Website nur im Querformat angezeigt wird


Ich möchte meine Website nur im Querformat zeigen, ist das möglich? Es spielt keine Rolle, welche Ausrichtung das Gerät in der Hand des Benutzers hat, aber die Website wird immer im Querformatmodus sein. Ich habe gesehen, wie iPhone-Anwendung so funktioniert, aber kann dies für eine Website getan werden?


76
2018-01-05 05:25


Ursprung


Antworten:


@ Golmaal hat das wirklich beantwortet, ich bin nur ein bisschen wortreicher.

<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, dass der Benutzer die Ausrichtung ändert, Sie können sie jedoch zumindest mitteilen. In diesem Beispiel wird der Wrapper im Hochformat ausgeblendet und die Warnmeldung angezeigt. Anschließend wird die Warnmeldung im Querformat ausgeblendet und das Porträt angezeigt.

Ich denke nicht, dass diese Antwort besser ist als @Golmaal, nur ein Kompliment dazu. Wenn Sie diese Antwort mögen, achten Sie darauf, @Golmaal das Guthaben zu geben.

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 Freigabe von Cordova ist es am Ende wirklich schrecklich. Es ist besser, 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.


104
2018-01-05 05:45



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

43
2018-01-05 05:32



Probieren Sie es aus. Es könnte für Sie passender sein

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

Dies wird automatisch die gleichmäßige Rotation verwalten.


29
2018-03-13 17:25



Ich musste mit den Breiten meiner Hauptbehälter spielen:

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

1