HTML5 Fullscreen API: Vollbildmodus schon nutzbar mit Javascript?

HTML5 Fullscreen API: Fullscreen mode already usable? javascript?

6. February 2020

At the moment I am working intensively with the HTML5 Fullscreen API. With this short article I would like to point out some stumbling blocks and describe in which cases the usage is unfortunately simply not possible at the moment.



The sense and purpose of fullscreen mode

From the user’s point of view, this display mode of web content can be particularly helpful when it is important not to risk distraction by competing elements on the screen. Because this is the only way to cover all browser and operating system window bars and toolbars. This applies to desktop systems as well as mobile devices.


It is also a very easy way to bring media content (videos, canvas, images, etc.) to the maximum displayable size. On small displays, the space gained by overlaying browser elements can be considered quite valuable.



You need to know about the fullscreen API

    To enter full screen mode, the user must have triggered an action (usually a click). This cannot be simulated programmatically.



Mobile devices and fullscreen

On desktop PCs the support in the different browsers is clear and you can react quite well to it. It gets hair-raising on mobile devices. Usually the support is still very low, since iOS does not offer this feature any more than Android does. We are talking about the native Android browser (≠ Chrome). Chrome for Android, which is the default browser on some devices, supports the API. The same applies to Firefox.


Our own tests have shown that the Android Stock Browser under 4.4.2 knows the fullscreen javascript functions, but calling them does not achieve the desired effect. There the fullscreen mode does not work anyway. This is not only limited to this Android version, see GitHub.


As a result, the good JavaScript wrapper screenfull.js, on some devices incorrectly states that the browser can switch to full screen mode. This is especially critical for applications whose status change depends on the event when entering full screen mode.




If you’re trying to give users a similar experience across devices, full-screen mode may not be the right choice for full-screen web content.


However, if it’s not critical to the application that switching to full screen doesn’t work in some cases, then nothing stands in the way of using it. On the other hand, you have to ask yourself if full screen is even necessary.


Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!


Bitte hinterlassen Sie uns eine positive Bewertung.


Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen


Tell us what you think! Reply now

Your email address will not be published.