Erzwinge den Querformat-Orientierungsmodus

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?

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.

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

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

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!