Können Sie die Querformatorientierung für Webanwendungen erzwingen?

Querformatausrichtung für Anwendungen erzwingen

Frage: Die Anzeige einer Anwendung im „Querformat“-Modus erzwingen, obwohl sie für den „Hochformat“-Modus konzipiert ist , ist ein häufig auftretendes Problem. Wie kann das erreicht werden?

Ursprüngliche Antwort:

Leider ist es nicht möglich, eine Website oder Webanwendung auf eine bestimmte Ausrichtung zu beschränken. Diese Einschränkung dient dazu, die inhärente Benutzererfahrung des Geräts zu bewahren. Sie können jedoch die folgenden Methoden verwenden, um die aktuelle Ausrichtung zu erkennen:

• CSS3-Medienabfragen:

@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 */
}

• JavaScript-Ausrichtungsänderung Ereignis:

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

Aktualisierte Antwort (12. November 2014):

Mit der Einführung des HTML5-Webapp-Manifests wird der Orientierungsmodus erzwungen ist jetzt möglich. Dies kann erreicht werden durch:

• Erstellen einer manifest.json-Datei und Einfügen der folgenden Zeilen:

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

• Referenzieren des Manifests in Ihrer HTML-Datei:

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

Beachten Sie, dass die Unterstützung für das Webapp-Manifest für die Sperrausrichtung von Land zu Land unterschiedlich sein kann Browser.

Das obige ist der detaillierte Inhalt vonKönnen Sie die Querformatorientierung für Webanwendungen erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!