Minimal-UI in iOS 7.1: Neuer Vollbildmodus für Safari-Webseiten

Neben den sichtbaren Neuerungen kann Apples iOS 7.1-Update auch mehrere, nicht ganz so prominente System-Erweiterungen für sich verbuchen. Beispiel Safari: Webgestalter können unter iOS 7.1 jetzt einen neuen Vollbildmodus für Webseiten aktivieren.

Minimal-UI. Die neue Modus blendet die Safari-Werkzeugleiste beim mobilen Besuch von Webseiten aus und nutzt die komplette Display-Fläche zur Anzeige des Seiteninhalts aus. Apple beschreibt die neue Funktion.

A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.

Webmaster, Designer und Gestalter die ihre Seiten unter Mobile Safari im Vollbild anzeigen lassen möchten müssen die Viewport-Zeile ihres Online-Auftritts um den Parameter „minimal-ui“ erweitern:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

Beim Besuch entsprechend vorbereiteter Seiten – hier könnt ihr euch ein Beispiel ansehen – blendet Safari die normalen Bedienelemente aus und zeigt die Seite Display-Füllend an.

Normale Webseite:

Webseite mit Minimal-UI:

Aber aufgepasst: Der Einsatz des neuen Schlüsselwortes „minimal-ui“ kann derzeit noch für Probleme sorgen. So lassen sich die angezeigten Elemente nur schwer vergrößern, zuvor gültige CSS-Platzierungen können verrutschen und oberen 40 Pixel der Webseite lassen sich nur schlecht für interaktive Elemente nutzen. Kleine Nicklichkeiten, die auf der Webseite Mobilexweb in einem erklärenden Eintrag zusammengefasst wurden.