orientation
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das orientation
Manifestmitglied wird verwendet, um die Standardausrichtung Ihrer Webanwendung festzulegen. Es definiert, wie die App beim Start und während der Nutzung in Bezug auf die Bildschirmausrichtung des Geräts angezeigt werden soll, insbesondere auf Geräten, die mehrere Ausrichtungen unterstützen.
Hinweis: Die Ausrichtung der App kann zur Laufzeit auf verschiedene Weise geändert werden, zum Beispiel durch die Nutzung der Screen Orientation API.
Syntax
/* Keyword values */
"orientation": "any"
"orientation": "natural"
"orientation": "portrait"
"orientation": "portrait-primary"
"orientation": "portrait-secondary"
"orientation": "landscape"
"orientation": "landscape-primary"
"orientation": "landscape-secondary"
Werte
orientation
-
Ein String, der die Standardausrichtung der Web-Anwendung angibt. Wenn das
orientation
Mitglied nicht angegeben oder ein ungültiger Wert bereitgestellt wird, nutzt die Web-Anwendung typischerweise die natürliche Ausrichtung des Geräts und alle benutzer- oder systemseitigen Ausrichtungseinstellungen.Der
orientation
Wert muss eines der folgenden Schlüsselwörter sein:any
-
Zeigt die Web-App in jeder vom Betriebssystem oder den Benutzereinstellungen erlaubten Ausrichtung an. Es ermöglicht der App, sich frei zu drehen, um die Ausrichtung des Geräts anzupassen, wenn es gedreht wird.
natural
-
Zeigt die Web-App in der Ausrichtung an, die als die natürlichste für das Gerät gilt, bestimmt durch den Browser, das Betriebssystem, Benutzereinstellungen oder das Display selbst. Es entspricht der Art und Weise, wie das Gerät am häufigsten gehalten oder genutzt wird:
- Auf Geräten, die typischerweise vertikal gehalten werden (z. B. Smartphones), ist
natural
normalerweiseportrait-primary
. - Auf Geräten, die typischerweise horizontal genutzt werden (z. B. Computerbildschirme und Tablets), ist
natural
normalerweiselandscape-primary
.
Wenn das Gerät gedreht wird, kann sich die App drehen oder auch nicht, um sich der natürlichen Ausrichtung des Geräts anzupassen; dieses Verhalten kann je nach spezifischem Gerät, Browser-Implementierung und Benutzereinstellungen variieren.
- Auf Geräten, die typischerweise vertikal gehalten werden (z. B. Smartphones), ist
portrait
-
Zeigt die Web-App mit einer Höhe größer als der Breite an. Es erlaubt der App, zwischen den Ausrichtungen
portrait-primary
undportrait-secondary
zu wechseln, wenn das Gerät gedreht wird. portrait-primary
-
Zeigt die Web-App im Hochformatmodus an, typischerweise mit aufrecht gehaltenem Gerät. Dies ist normalerweise die Standard-App-Ausrichtung auf Geräten, die natürlich im Hochformat sind. Abhängig vom Gerät und der Browser-Implementierung bleibt die App typischerweise in dieser Ausrichtung, auch wenn das Gerät gedreht wird.
portrait-secondary
-
Zeigt die Web-App im umgekehrten Hochformatmodus an, was
portrait-primary
um 180 Grad gedreht ist. Abhängig vom Gerät und der Browser-Implementierung bleibt die App typischerweise in dieser Ausrichtung, auch wenn das Gerät gedreht wird. landscape
-
Zeigt die Web-App mit einer Breite größer als der Höhe an. Es erlaubt der App, zwischen den Ausrichtungen
landscape-primary
undlandscape-secondary
zu wechseln, wenn das Gerät gedreht wird. landscape-primary
-
Zeigt die Web-App im Querformatmodus an, typischerweise mit dem Gerät in seiner Standard-Horizontalposition. Dies ist normalerweise die Standard-App-Ausrichtung auf Geräten, die natürlich im Querformat sind. Abhängig vom Gerät und der Browser-Implementierung bleibt die App typischerweise in dieser Ausrichtung, auch wenn das Gerät gedreht wird.
landscape-secondary
-
Zeigt die Web-App im umgekehrten Querformatmodus an, was
landscape-primary
um 180 Grad gedreht ist. Abhängig vom Gerät und der Browser-Implementierung bleibt die App typischerweise in dieser Ausrichtung, auch wenn das Gerät gedreht wird.
Beschreibung
Um das orientation
Manifestmitglied zu verstehen, ist es wichtig, mit den folgenden ausrichtungsbezogenen Konzepten vertraut zu sein:
- Geräteausrichtung: Definiert, wie das Gerät physisch gehalten oder positioniert wird.
- Bildschirmausrichtung: Definiert die physische Ausrichtung des Displays des Geräts.
- App-Ausrichtung: Definiert, wie der Inhalt der App relativ zur Bildschirmausrichtung angezeigt wird.
Wenn ein Gerät gedreht wird, ändert sich typischerweise die Bildschirmausrichtung. Zum Beispiel führt das Drehen eines Smartphones von vertikal nach horizontal normalerweise dazu, dass der Bildschirm vom Hoch- ins Querformat wechselt. Ohne eine spezifische Ausrichtungseinstellung im Manifest passen die meisten Apps ihr Layout an, um diese neue Bildschirmausrichtung zu berücksichtigen.
Das orientation
Mitglied des Manifests ermöglicht es Ihnen zu steuern, wie Ihre App auf diese Änderungen reagiert. Indem Sie eine bevorzugte Ausrichtung für Ihre App angeben, können Sie entscheiden, ob Ihre App sich an Veränderungen der Bildschirmausrichtung anpassen oder ein festes Layout beibehalten soll, unabhängig davon, wie das Gerät gehalten wird. Wenn Sie z. B. "orientation": "portrait-primary"
festlegen, können Sie angeben, dass Sie bevorzugen, dass Ihre App immer im aufrechten Hochformatmodus relativ zum Bildschirm angezeigt wird, selbst wenn das Gerät gedreht wird. Der Browser oder das Betriebssystem wird versuchen, diese Präferenz nach Möglichkeit zu berücksichtigen.
Das untenstehende Beispiel zeigt, wie das Layout einer Web-App erscheinen könnte, wenn ein Smartphone gedreht wird. Für dieses Beispiel nehmen Sie an, dass der Wert der App orientation
auf any
gesetzt ist, was der App erlaubt, zwischen allen orientation
Werten zu rotieren, wenn das Smartphone gedreht wird. Nehmen Sie auch an, dass sowohl das Telefon als auch der Browser alle Ausrichtungen unterstützen. Die Sequenz zeigt eine Drehung des Telefons im Uhrzeigersinn, mit jeder Position ausgehend von der Startposition, wie folgt:
- Oben links:
portrait-primary
(Startposition) - Oben rechts:
landscape-primary
(90 Grad) - Unten links:
portrait-secondary
(180 Grad) - Unten rechts:
landscape-secondary
(270 Grad)
Umfang und Standardverhalten
Die angegebene orientation
wird auf alle oberen Browsing-Kontexte der Web-App angewendet.
Wenn ein Browser den angegebenen orientation
Wert unterstützt, wird dieser während der gesamten Lebensdauer der App als Standard-App-Ausrichtung verwendet, es sei denn, er wird zur Laufzeit überschrieben. Dies bedeutet, dass Browser bei jeder Navigation im oberen Browsing-Kontext zu dieser Standardausrichtung zurückkehren.
Auswahl einer bevorzugten Ausrichtung für Ihre Web-App
Durch das Festlegen einer bestimmten Ausrichtung können Sie sicherstellen, dass Ihre Web-App optimal für ihren Inhalt und die Benutzeroberfläche angezeigt wird. Zum Beispiel ist eine Video-App oft besser für die Querformatausrichtung geeignet, während eine Lese-App typischerweise im Hochformat besser funktioniert.
Das Nicht-Spezifizieren einer Ausrichtung kann auch eine bewusste Entscheidung sein, damit sich Ihre Web-App flexibel an verschiedene Geräte und Benutzervorlieben anpassen kann.
orientation
im Manifest vs. Verhalten der Screen Orientation API
Während das orientation
Manifestmitglied die Standardausrichtung der Web-App festlegt, kann die Ausrichtung eines oberen Browsing-Kontexts geändert werden, sobald die Web-App läuft, indem die Screen Orientation API verwendet wird.
Die orientation
Werte sind im Web-App-Manifest und der Screen Orientation API ähnlich, aber ihr Verhalten und ihre Zwecke unterscheiden sich.
-
Web-App-Manifest:
- Schlägt die bevorzugte Standardausrichtung der Web-App unter Verwendung des
orientation
Manifestmitglieds vor. - Legt die initiale Ausrichtung beim Start der App fest.
- Schlägt die bevorzugte Standardausrichtung der Web-App unter Verwendung des
-
Screen Orientation API:
- Verwendet Ausrichtungswerte, um den Bildschirm auf eine bestimmte Ausrichtung zu sperren.
- Erlaubt dynamische Änderungen der Ausrichtung zur Laufzeit (zum Beispiel das Sperren der Ausrichtung mit
screen.orientation.lock()
).
Hinweis: Die Methode
lock()
der Screen Orientation API hat begrenzte Unterstützung in verschiedenen Browsern. Überprüfen Sie die Kompatibilität, wenn Sie planen, die Bildschirmorientierung zur Laufzeit dynamisch zu ändern.
Plattform- und Browserbeschränkungen
Wenn Sie die Ausrichtungspräferenz für Ihre App hinzufügen, bedenken Sie die folgenden Überlegungen und Einschränkungen:
- Browseranbieter und Gerätehersteller entscheiden, welche Ausrichtungen und
display
Modi kompatibel sind. - Bestimmte UI/UX-Anliegen und Plattformkonventionen können einschränken, welche Bildschirmorientierungen und Anzeigemodi zusammen verwendet werden können.
- Die Unterstützung für spezifische
orientation
Werte kann je nach Gerät und Plattform variieren. - Einige Geräte unterstützen möglicherweise nicht alle
orientation
Werte, wieportrait-secondary
undlandscape-secondary
. - Einige Browser erlauben möglicherweise nicht, die Standardausrichtung einer Web-App zu ändern, während sie in bestimmten Anzeigemodi ist (z. B.
"display": "browser"
).
Beispiele
Festlegen einer festen Ausrichtung für eine Web-App
Dieses Beispiel legt die Ausrichtung der App auf portrait-primary
fest. Angenommen, Browser und Gerätesupport sind vorhanden, wird die App immer im aufrechten Hochformatmodus angezeigt, auch wenn das Gerät gedreht wird.
{
"name": "My Web App",
"orientation": "portrait-primary"
}
Festlegen einer flexiblen Ausrichtung für eine Web-App
Betrachten Sie eine Fotoanzeige- und Bearbeitungs-App. Im App-Manifest, wie unten gezeigt, ist orientation
auf any
gesetzt. Dadurch kann die App in der aktuellen Ausrichtung des Geräts gestartet werden und sich an sowohl portrait
als auch landscape
Ausrichtungen anpassen, wenn Nutzer ihre Geräte drehen. Dieses orientation
Setting ermöglicht es Benutzern, Fotos bequem in der jeweils am besten geeigneten Ausrichtung anzuzeigen und zu bearbeiten.
{
"name": "PhotoGallery Pro",
"short_name": "PhotoGal",
"description": "A professional photo gallery and editing application",
"start_url": "/index.html",
"display": "standalone",
"orientation": "any",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com.example.photogallery"
}
]
}
Spezifikationen
Specification |
---|
Web Application Manifest # orientation-member |
Browser-Kompatibilität
BCD tables only load in the browser