Wie erzwingen Sie die Querformatausrichtung in Ihrer Web-App?

Lüften Sie das Geheimnis zur Durchsetzung der Querformatausrichtung für Ihre Anwendung

Es ist kein Geheimnis, dass bestimmte Anwendungen einen bestimmten Ausrichtungsmodus erfordern. Wenn es sich bei Ihrer App um eine App handelt, die absolut nicht für den Hochformatmodus konzipiert ist, sind Sie möglicherweise auf eine Mauer gestoßen. Die Möglichkeit, den Querformatmodus zu erzwingen, fehlte schon lange, aber keine Angst!

Ursprüngliche Lösung: Eingeschränkte Erkennung und keine Kontrolle

Traditionell konnte man nur erkennen die aktuelle Ausrichtung mithilfe von CSS3-Medienabfragen oder JavaScript-Ereignissen, um entsprechende CSS-Stile auszulösen. Dadurch konnten Sie zwar auf Ausrichtungsänderungen reagieren, das natürliche Verhalten des Geräts blieb jedoch bestehen, sodass Sie keine bestimmte Ausrichtung erzwingen konnten.

HTML5 Webapp Manifest to the Rescue

Schließlich bietet das HTML5-Webapp-Manifest eine Lösung. Durch das Hinzufügen einer manifest.json-Datei können Sie jetzt die folgenden Eigenschaften festlegen:

• Anzeige: Steuert den UI-Modus (Standalone, Vollbild, Minimal-UI oder Browser)
• Ausrichtung: Erzwingt den Quer- oder Hochformatmodus (Querformat oder Hochformat)

Indem Sie diese Zeilen in Ihre manifest.json einfügen und in Ihrer HTML-Datei verknüpfen, können Sie endlich die Querformatausrichtung für Ihre Anwendung erzwingen.

Implementierungsdetails:

{
    "display": "fullscreen", /* Choose UI mode here */
    "orientation": "landscape"
}

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

Unterstützte Browser:

Derzeit bietet Chrome Unterstützung für die Webapp-Manifeste Ausrichtungssperrfunktion. Sobald wir weitere Informationen sammeln, werden wir diesen Artikel entsprechend aktualisieren.

Das obige ist der detaillierte Inhalt vonWie erzwingen Sie die Querformatausrichtung in Ihrer Web-App?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!