Going Fullscreen On iPad Safari 🤩


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 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 doesn’t show the latest information too has a decent level of support. This feature was released on iOS 12.0 Safari (Now iPadOS Safari) barely a few days ago and as of November 4th, 2018 March 1st, 2019 Caniuse still doesn’t reflect the changes yet. Hopefully, it will be updated soon! Updated.

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

[ Image credit: 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.


Written by: Marvin Danig, I’m the CEO of Bubblin Superbooks but I also love to code. Follow me on Twitter for more!

Credits: Special thanks to Sonica Arora (@sonicaaaaaa) and Abbey Rennemeyer (@abbeyrenn), Editor of freeCodeCamp for all the editing help on this article.

P.S.: It’s likely that some of you read this article on your desktop. I recommend revisiting on your iPad. It’s about post-PC era you know. 🙈