84

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?

javascript html mobile-browser

— coure2011
quelle

3

Gute Frage, aber ich wette, die Antwort ist "Nicht möglich", obwohl Sie betrügen können: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Nicht wirklich. Sie können es mit CSS-Transformationen fälschen, aber es ist hässlich, und ich glaube nicht, dass es eine Möglichkeit gibt, festzustellen, ob es auf Android auf dem Kopf steht. Ich bin mir ziemlich sicher, dass dies hier schon einmal besprochen wurde.

— Dagg Nabbit

1

Ist es möglich, die Website auf eine Mindestbreite von 320 Pixel zu zwingen? Wenn die Bildschirmgröße niedriger ist, muss der Benutzer einen Bildlauf durchführen, um die gesamte Site anzuzeigen. Oder kann ich 240px Breite auf 320px Inhalt zoomen?

— coure2011

Ich bin mir nicht sicher, wie hilfreich dieser Link für Sie sein könnte, aber die neuesten [Jan 2020] -Funktionen schlagen eine neue API für die Orientierungssperre von W3C vor. W3c.github.io/screen-orientation

— Sarath Sajan

117

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

— Jason Sebring
quelle

meinen Tag gerettet! Dies ist ein sehr praktisches Skript, um den Querformatmodus auf kleinen Geräten zu erzwingen und eine nette Nachricht zu senden.

— Dhruvpatel

Sie haben jedoch den größten Teil der Gutschrift erhalten;) + 1d für Ihre gut beschriebene Antwort und @Golmaal ..

— Hitesh Misro

Wirklich nützlich, danke! Es ist erwähnenswert, dass dies nicht zu funktionieren scheint, wenn Sie es in ein separates Stylesheet einfügen.

— Mmm

48

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

— Golmaal
quelle

35

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>

Erweitern Sie das Snippet

Dadurch wird automatisch eine gleichmäßige Drehung verwaltet.

— Herr A.
quelle

7

Clever, funktioniert aber nicht wirklich. Ein Großteil der Seite ist beim Drehen nicht zugänglich, da nur der Inhalt und nicht der eigentliche Browser gedreht wird.

— Graham

2

Dies würde jede Animation beschädigen und wahrscheinlich die mobile Reaktionsfähigkeit der Seite zerstören.

— Wissam El-Kik

2

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

— Krake
quelle

nette Idee .. irgendwelche Artefakte / Geräusche beim Umschalten zwischen Hoch- / Querformat?

— hko

Erzwingen, dass die Website nur im Querformat angezeigt wird

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