Did you know that Apple rolled out support for the Fullscreen API on iPad Safari last fall? Well, if you didn't you do so now. ?

What this means is that developers can now create fully immersive web applications for the users on the iPad. It removes every distraction on the screen reliably to help the user focus on the task/content at hand—just like a native app would—and yet it allows them to get away if they wanted to by escaping fullscreen mode.

Meaning, more freedom and better accessibility features of the web! Personally, I think that this is a huge win for the web. It is particularly useful for those of us who use an iPad as their "go to" device for surfing at night. ?

While there are some issues in the current implementation of the fullscreen api on iPad Safari, that we will get into shortly, this update from Apple has been nothing short of a bonus for our startup. We built fullscreen capability right into Bubblin's Superbooks for the book-lovers on our site.

The following blogpost explains how we implemented it.

Before we start let's take a look at the current level of vendor support for the fullscreen api:

fullscreen-api-ipad

Update: As of 1st March, 2019 most of the bugs around escaping fullscreen mode have been resolved by Apple.

As you can see from CanIUse, nearly all major browsers on the desktop and Android devices have had some level of support for the fullscreen API, and now the iOS Safari too has a decent level of support.

Aside from familiar vendor prefixes, and varying method names and a few other minor inconsistencies across implementations, it doesn’t take much to be able to start using the fullscreen api on the iPadOS Safari.


Here's how I implemented using vanilla javascript:

First, define a named function _toggleFullScreen that lets you toggle between fullscreen and url mode:


const _toggleFullScreen = function _toggleFullScreen() {
	if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else {
			if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else {
				if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				}
			}
		}
	} else {
		const _element = document.documentElement;
		if (_element.requestFullscreen) {
			_element.requestFullscreen();
		} else {
			if (_element.mozRequestFullScreen) {
				_element.mozRequestFullScreen();
			} else {
				if (_element.webkitRequestFullscreen) {
					_element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
				}
			}
		}
	}
};

This _toggleFullScreen function takes care of all the vendor prefixes and browser quirks across the spectrum. Now we just have to find out which device, browser, and iOS version the user is on to enable the fullscreen functionality for them. We have to determine if the user is (1) on the iPad and (2) using the Safari browser, and (3) if the browser they are on is iOS 12 or higher already. All of that.

Fortunately (or unfortunately) the vendor sniffing technique comes to the rescue:

	const userAgent = window.navigator.userAgent;

	const iPadSafari =
		!!userAgent.match(/iPad/i) &&  		// Detect iPad first.
		!!userAgent.match(/WebKit/i) && 	// Filter browsers with webkit engine only
		!userAgent.match(/CriOS/i) &&		// Eliminate Chrome & Brave
		!userAgent.match(/OPiOS/i) &&		// Rule out Opera
		!userAgent.match(/FxiOS/i) &&		// Rule out Firefox
		!userAgent.match(/FocusiOS/i);		// Eliminate Firefox Focus as well!

	const element = document.getElementById('fullScreenButton');

	function iOS() {
		if (userAgent.match(/ipad|iphone|ipod/i)) {
			const iOS = {};
			iOS.majorReleaseNumber = +userAgent.match(/OS (\d)?\d_\d(_\d)?/i)[0].split('_')[0].replace('OS ', '');
			return iOS;
		}
	}

	if (element !== null) {
		if (userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
			element.className += ' hidden';
		} else if (userAgent.match(/iPad/i) && iOS().majorReleaseNumber < 12) {
			element.className += ' hidden';
		} else if (userAgent.match(/iPad/i) && !iPadSafari) {
			element.className += ' hidden';
		} else {
			element.addEventListener('click', _toggleFullScreen, false);
		}
	}

We tested the code above on quite a few browsers on the iPad, but vendor sniffing, as you might already know, is an inefficient-cumbersome-avoid-as-much-as-you-can solution.

Going forward I expect more browsers on the iPad to support fullscreen api (maybe iPadOS Google Chrome will be next?) or that they will be ruled out using vendor sniffing. Given that support for fullscreen api on tablets will only improve over time, we can easily revisit the sniffer code above until this progressive enhancement melts into broader support.

To see the above code working open a Superbook on your iPad, turn a few pages and go fullscreen (menu on bottom right under three dots).
iPad Superbook on The Solar System

Here are a few sample userAgent strings that I used to identify browsers on the iPad:

iPad Safari:

Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

Firefox Original:

Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/14.0b12646 Mobile/16B92 Safari/605.1.15

Firefox Focus:

Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FocusiOS/7.0.3 Mobile/16B92 Safari/605.1.15

…and so on.

On the CSS side you may not have to make any changes, but there are few options to consider depending on your situation:


:-webkit-full-screen body,
:-moz-full-screen body,
:-ms-fullscreen body {
	/* properties */
	width: 100vw;
	height: 100vh;
}

:full-screen body {
	/*pre-spec */
	/* properties */
	width: 100vw;
	height: 100vh;
}

:fullscreen body {
	/* spec */
	/* properties */
	width: 100vw;
	height: 100vh;
}

/* deeper elements */

:-webkit-full-screen body {
	width: 100vw;
	height: 100vh;
}

/* styling the backdrop*/

::backdrop,
::-ms-backdrop {
	/* Custom styles */
}


That's it.

You now have a web-app that can easily go fullscreen on the iPad Safari and people can enjoy it like a standalone/native app without needing to add to the homescreen. Again, I think this is a huge win for the web and you might want to take advantage of it for your app.


  • About the author: Hi. I am Marvin Danig, CEO of Bubblin Superbooks (link) and a very lazy web developer. You should follow me on Twitter!
  • With editing help from: Sonica Arora (@sonicaaaaaa), CTO of Bubblin and Abbey Rennemeyer (@abbeyrenn), Editor of freeCodeCamp.
  • Original post was published in November, 2018 at the Bubblin blog.