Going Fullscreen On iPad Safari 🤩


Great news!

Apple has rolled out support for the Fullscreen API on iPad Safari with its iOS 12 update. This means developers can now create fully immersive web applications for their users on the iPad. Remove every distraction on the webpage reliably and help users focus on the task at hand—just like on a native app, and yet allowing them to get away if they wanted to—ala, better accessibility features of web.

We think that this is a huge win for the web.

It is a particularly useful for those of us who use iPad as their “go-to” device for web surfing at night. :-)

While there are some issues with the current implementation of fullscreen api on the iPad Safari, that we’ll get to shortly, this update from Apple has been nothing short of a bonus for us. We built fullscreen right into Bubblin Superbooks for our readers. This post explains how we implemented it, but before we start let’s take a look at the current level of vendor support (external link) at Caniuse first:

fullscreen-api-ipad

As you can see all of the major browsers on desktop and Android have some level of support for the Fullscreen API. On the iPad Safari though, the feature has been out for barely a few days so Caniuse doesn’t reflect that change yet (as of November 4th, 2018). Aside from the familiar vendor prefixes, varying method names and other minor inconsistencies across implementations, there is not much to be able to start using the fullscreen api on iPad Safari. Here’s how we implemented it using vanilla JavaScript:

First, we define a named function _toggleFullScreen to toggle between fullscreen and web mode on any browser like so:

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 and now we just have to find out which device, browser and iOS version the user is on and then enable fullscreen functionality accordingly. Now we have to determine if the user is on (1) the iPad and using the (2) Safari browser, and (3) if their on iOS 12 or higher already. Fortunately, (or unfortunately) we have vendor sniffing technique to our rescue for this:

	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 inefficent-cumbersome-avoid-as-much-as-you-can solution, so I’m sure there will be a few more browsers on iPad that we may need to rule out to reliably determine the iOS Safari. Given that support for Fullscreen API will only improve over time, we can revisit the sniffer code above until this progressive enhancement melts into broader support.

To see it working open a Superbook on your iPad and go fullscreen (menu on bottom right under three dots).

Here are a few sample userAgent strings that we 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 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’ve got a web app that can go fullscreen on iPad Safari and people can enjoy using it like a standalone app without needing to add to the homescreen anymore. Again, we think this is a huge win for web and you might want to take advantage of it.


Written by: Marvin Danig, I’m the CEO of Bubblin Superbooks but I also love to code. You can follow me on Twitter.

Edited by: Sonica Arora, CTO of Bubblin Superbooks.

P.S.: It’s likely that some of you viewed the article and the demo book on your desktop. If you did that we recommend revisiting the demo on your iPad.