Wie erzwinge ich die Ausführung einer Web-App im Querformat?

So erzwingen Sie den Querformatmodus in Webanwendungen

Trotz der inhärenten Flexibilität mobiler Geräte, sich an verschiedene Ausrichtungen anzupassen, kann es notwendig sein, dies zu tun Beschränken Sie bestimmte Anwendungen auf eine bestimmte Ausrichtung. So können Sie den „Querformat“-Modus für Ihre Anwendung erzwingen.

1. Erkennung der Geräteausrichtung

Bisher war es unmöglich, die Ausrichtung von Webanwendungen zu sperren. Mit CSS3-Medienabfragen können Entwickler jedoch die Geräteausrichtung erkennen und entsprechend unterschiedliche CSS-Stile anwenden:

@media screen and (orientation:portrait) {
    /* Portrait mode styles */
}

@media screen and (orientation:landscape) {
    /* Landscape mode styles */
}

Oder mit JavaScript:

document.addEventListener("orientationchange", (e) => {
    if (window.orientation === 0 || window.orientation === 180) {
        /* Portrait mode */
    } else {
        /* Landscape mode */
    }
});

2. HTML5-Webapp-Manifest

Seit dem 12. November 2014 bietet das HTML5-Webapp-Manifest eine Möglichkeit, den Orientierungsmodus zu erzwingen. In die Datei manifest.json können Sie Folgendes einfügen:

{
    "display": "landscape",
    "orientation": "landscape",
    ...
}

Dann fügen Sie das Manifest in Ihre HTML-Datei ein:

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

Beachten Sie, dass die Ausrichtungssperre des Webapp-Manifests unterstützt wird Die Funktion kann je nach Browser variieren. Es wurde bestätigt, dass Chrome diese Funktionalität bietet.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich die Ausführung einer Web-App im Querformat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!