Caveats of the fullscreen API

My example for WebGL and the monitor test use a canvas element for display. In addition there is an option to switch to fullscreen mode. Technically this is achieved by using the fullscreen API. The implementation is always the same:

  1. When clicking the button fullscreen mode the canvas element will be changed to fullscreen by using requestFullscreen().
  2. A handler which reacts to fullscreen changes corrects the width and height of the element to the screen size taking window.devicePixelRatio into account to support the native resolution of the device.

However I noticed a number of problems here:

If the canvas element is in fullscreen mode some browsers do not report the dimensions of the screen in screen.width and screen.height but only the size of the browser window. When reading these values before usingrequestFullscreen() they are correct.

Some mobile browsers don’t enlarge canvas elements to full display size when using requestFullscreen(). The elements always have a black border. I don’t know yet what is causing this. However I also use a surrounding DIV element as a container so I can scale the canvas elment for high resolution screens. If I switch this container to fullscreen mode instead of the canvas itself it also works with mobile browsers.

Use full display size on mobile devices

The function requestFullscreen() accepts an optional parameter which allows to pass options for the view (also see the documentation). With { navigationUI: "hide" } you can hide the navigation bar on the display and use the full display area:

container.requestFullscreen({ navigationUI: "hide" });

To leave this view you swip from the upper or lower border of the display to the center. Then the navigation bar will be displayed again and you can get back to the normal view by touching the “back” symbol.

Leave a public comment

Your email address will not be published. This is not a contact form! If you want to send me a personal message, use my e-mail address in the imprint.

You can use the following HTML tags in the comment:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>