Kann eine Website anders aussehen, wenn sie als PWA dargestellt wird? Ja! Und sogar recht einfach, mit einer Media Query in CSS. Dafür bedient man sich der display-mode Eigenschaft. Die meisten PWA’s blenden die Adresszeile aus und haben dadurch einen anderen Display-Modus. Es gibt folgende Display Modes:
fullscreen | Der gesamte verfügbare Anzeigebereich wird genutzt und es wird kein User Agent Chrome angezeigt. |
standalone | Die PWA sieht aus und fühlt sich an wie eine eigenständige App. Dies kann bedeuten, dass die Anwendung ein anderes Fenster hat, ein eigenes Symbol im Startmenü der Anwendung usw. In diesem Modus verzichtet der User Agent auf UI-Elemente zur Steuerung der Navigation, kann aber andere UI-Elemente wie z. B. eine Statusleiste enthalten. |
minimal-ui | Die Anwendung sieht aus wie eine eigenständige Anwendung und fühlt sich auch so an, verfügt aber über einen minimalistischen Umfang von UI-Elementen zur Steuerung der Navigation. Diese Elemente variieren je nach Browser. |
browser | Die Anwendung wird je nach Browser und Plattform in einer herkömmlichen Browser-Registerkarte oder einem neuen Fenster geöffnet. (So sieht eine Website normalerweise aus) |
Display Mode in einer Media Query nutzen
Wenn du zum Beispiel einen bestimmten CSS-Befehl im Standalone-Modus anwenden möchtest, funktioniert das so:
@media all and (display-mode: standalone) {
selector {
display: none;
}
}Über mich
Was denkst du dazu?
1
1
