The FUBAR-ness of the full screen API

published on

September 14th, 2013 and tagged with FUBAR

So I’m doing this android webapp at work and its awesome and deployed to some 200 tablets and all I want is to run it fullscreen on all of them.

My coworker then says,

“What about the full screen API?”

According to MDN this is what it is

Given an element that you’d like to present in fullscreen mode (such as a <video>, for example), you can present it in fullscreen mode by simply calling its requestFullscreen() method; this method is implemented in Gecko as element.mozRequestFullScreen() and in WebKit as element.webkitRequestFullscreen().

The MDN definition of the full screen API

And I’m like:

20130914-105456.jpg
This sounds like a great idea!

Except I’m wanting to fullscreen the first child of the body tag so I do this:

document.getElementById("container").webkitRequestFullscreen();
Which just returns undefined and nothing happens. I’m like

20130914-110719.jpg

But not to worry, I’m a programmer and I solve problems, so I google, stackOverflow and tries out a bunch of combinations and none work. But using it on an image works great.

My conclusion is that the API is flawed for the web of apps.

W3C, this ones for you:

20130914-110954.jpg