Erzwinge den Querformat-Orientierungsmodus

89

Ich versuche, den "Querformat" -Modus für meine Anwendung zu erzwingen, da meine Anwendung absolut nicht für den "Hochformat" -Modus ausgelegt ist. Wie kann ich das machen?

user1599537
quelle

Antworten:

91

Mit dem HTML5-Webanwendungsmanifest ist dies jetzt möglich. Siehe unten.


Ursprüngliche Antwort:

Sie können eine Website oder eine Webanwendung nicht in einer bestimmten Ausrichtung sperren. Es widerspricht dem natürlichen Verhalten des Gerätes.

Sie können die Geräteorientierung mit folgenden CSS3-Medienabfragen erkennen :

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Oder indem Sie ein JavaScript-Orientierungsänderungsereignis wie folgt binden:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

Update am 12. November 2014: Es ist jetzt mit dem HTML5-Webanwendungsmanifest möglich.

Wie auf html5rocks.com erläutert , können Sie den Ausrichtungsmodus jetzt mithilfe einer manifest.jsonDatei erzwingen .

Sie müssen diese Zeile in die JSON-Datei aufnehmen:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

Und Sie müssen das Manifest wie folgt in Ihre HTML-Datei aufnehmen:

<link rel="manifest" href="manifest.json">

Ich bin mir nicht ganz sicher, welche Unterstützung das Webanwendungsmanifest für das Sperren des Orientierungsmodus bietet, aber Chrome ist definitiv da. Wird aktualisiert, wenn ich die Informationen habe.

Rémi Breton
quelle
1
Ja, auch Webapps. Selbst wenn Sie Ihre Website auf dem Startbildschirm des iPhone oder iPad "speichern", ändert die Webanwendung ihre Ausrichtung.
Rémi Breton
2
Laut caniuse.com können Manifeste seit Android 4.1 verwendet werden. Siehe caniuse.com/#feat=offline-apps
Rémi Breton
1
Wie kann ich feststellen, ob das Manifest aufgerufen wird? Es funktioniert bei mir nicht und es wird nichts angezeigt, um in das Netzwerk meiner Entwicklungstools geladen zu werden, obwohl sich das Manifest an derselben Stelle befindet wie die index.html, mit der es verknüpft ist.
Ian S
3
In Chrome können Sie jetzt im Inspektionsmodus die Registerkarte "Anwendung" überprüfen. Es gibt eine "Manifest" -Seite mit einem direkten Link zu Ihrer JSON-Datei und Informationen dazu.
Drskullster
1
@ RémiBreton - suchst du noch nach diesen Informationen, also kannst du sie aktualisieren? Wir haben jahrelang geduldig gewartet !
Ashleedawg
46
screen.orientation.lock('landscape');

Erzwingt, dass es in den Querformatmodus wechselt und dort bleibt. Getestet auf Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples

Brecheisen
quelle
3
Funktioniert unter Android nicht mit dem Standard-Internetbrowser (nicht Chrome) - irgendwelche Ideen?
Antonios Tsimourtos
6
Nicht für Safari (iOS und macOS) implementiert
MBach
3
Nur eine kurze Anmerkung, dies funktioniert nur nach dem Aufrufen des Vollbildmodus.
Thane Brimhall
2
Diese Methode wird von Mozilla nicht empfohlen: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Außerdem hat sie eine sehr schlechte Browserkompatibilität
Fernando Garcia
1
Dies funktioniert auch im Vollbildmodus in Chrome nicht: |
Shamshirsaz.Navid
18

Ich benutze einige CSS wie diese (basierend auf CSS-Tricks ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
pomber
quelle
3
Ich habe diese Antwort verwendet. Alles, was ich tun muss, ist, die Medienabfrage von landscapeauf zu ändern , portraitund sie funktioniert wie erwartet@media screen and (orientation: portrait)
ymz
Die Antwort wurde bearbeitet, um zukünftigen Leuten zu helfen. Die Drehung sollte angewendet werden, wenn der aktuelle Modus aktiviert ist portrait(damit er umgeschaltet werden kann landscape).
Lfarroco
Vielen Dank. Ich habe nach so etwas gesucht.
Underdog
Wie könnte ich es nur auf eine einzelne Seite über page-id-xxx anwenden?
Homer
0

Ich hatte das gleiche Problem, es war eine fehlende manifest.json-Datei, wenn nicht gefunden, entscheidet der Browser mit Ausrichtung am besten, wenn Sie die Datei nicht angeben oder einen falschen Pfad verwenden.

Ich habe behoben, dass nur die Datei manifest.json in HTML-Headern korrekt aufgerufen wurde.

Meine HTML-Header:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

Und der Inhalt der Datei manifest.json:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Verwenden Sie dieses Webtool, um Ihre Favoriten und Symbole zu generieren: https://realfavicongenerator.net/

So generieren Sie Ihre Manifestdatei: https://tomitm.github.io/appmanifest/

Mein PWA funktioniert super, hoffe es hilft!

Miguel Montes de Oca
quelle