Zur Zeit beschäftige ich mich intensiv mit der HTML5 Fullscreen API. Mit diesem kleinen Beitrag möchte ich kurz auf einige Stolpersteine hinweisen und beschreiben, in welchen Fällen die Nutzung derzeit leider schlicht nicht möglich ist.
Sinn und Zweck des Vollbildmodus
Aus Nutzersicht kann dieser Darstellungsmodus von Webinhalten besonders dann hilfreich sein, wenn es darum geht auf dem Bildschirm keine Ablenkung durch konkurrierende Elemente zu riskieren. Denn dies ist die einzige Möglichkeit alle Browser- und Betriebssystem-Fensterleisten und -Toolbars zu überdecken. Dies gilt für Desktop-Systeme genauso wie für Mobilgeräte.
Außerdem ist es eine sehr einfache Möglichkeit Medieninhalte (Videos, Canvas, Bilder, etc.) auf die maximal darstellbare Größe zu bringen. Auf kleinen Displays ist der gewonnene Platz durch das Überlagern von Browser-Elementen als recht wertvoll einzustufen.
Das musst du über die Fullscreen API wissen
- Nutzt man dieses Feature von HTML5, muss im Sinne einer guten Usability ein Fallback angeboten werden. Der beste Fallback ist, den Inhalt im größtmöglichen Viewport maximiert darzustellen.
- Um in den Vollbildmodus zu gelangen, muss der Nutzer eine Aktion ausgelöst haben (in der Regel ein Klick). Dies ist nicht programmatisch simulierbar.
Mobile Devices und Fullscreen
Auf Desktop-PCs ist die Unterstützung in den unterschiedlichen Browsern klar und man kann ganz gut darauf reagieren. Haarsträubend wird es bei mobilen Endgeräten. In der Regel ist die Unterstützung noch sehr gering, da iOS dieses Feature ebenso wenig anbietet wie Android. Die Rede ist hier vom nativen Android Browser (≠ Chrome). Chrome für Android, der auf einigen Geräten der Standard-Browser ist, unterstützt die API. Dasselbe gilt für den Firefox.
Bei eigenen Tests hat sich herausgestellt, dass der Android Stock-Browser unter 4.4.2 zwar die Fullscreen-Javascript-Funktionen kennt, aber deren Aufruf nicht den gewünschten Effekt erzielt. Dort funktioniert der Fullscreen-Modus trotzdem nicht. Dies ist nicht nur auf diese Android-Version beschränkt, siehe GitHub.
Das hat zur Folge, dass der gute JavaScript-Wrapper screenfull.js, bei manchen Geräten fälschlicherweise angibt der Browser könne in den Vollbildmodus wechseln. Das ist besonders kritisch bei Anwendungen, deren Statusänderung auf das Event beim Eintritt in den Vollbildmodus angewiesen sind.
Fazit
Wenn man bestrebt ist den Nutzern deviceübergreifend ein ähnliches Erlebnis zu verschaffen, ist der Vollbildmodus ggf. nicht die richtige Wahl für bildschirmfüllende Web-Inhalte.
Wenn es für die Anwendung allerdings nicht kritisch ist, dass der Wechsel zum Fullscreen in einigen Fällen nicht klappt, steht der Nutzung nichts im Weg. Andererseits muss man sich dann fragen, ob Vollbild überhaupt notwendig ist. Noch Fragen? Wir helfen!
Kommentare