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
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.
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.