We have the ability to easily make immersive fullscreen websites andapplications, but like anything on the web there are a couple of ways to do it.This is especially important now that more browsers are supporting an "installedweb app" experience which launch fullscreen.
Getting your app or site fullscreen
There are several ways that a user or developer can get a web app fullscreen.
- Request the browser go fullscreen in response to a user gesture.
- Install the app to the home screen.
- Fake it: auto-hide the address bar.
Request the browser go fullscreen in response to a user gesture
Not all platforms are equal.iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android,Firefox, and IE 11+. Most applications you build will use a combination of theJS API and the CSS selectors provided by the fullscreen specification. The mainJS API's that you need to care about when building a fullscreen experience are:
element.requestFullscreen()(currently prefixed in Chrome, Firefox, and IE)displays the element in fullscreen mode.document.exitFullscreen()(currently prefixed in Chrome, Firefox and IE.Firefox usescancelFullScreen()instead) cancels fullscreen mode.document.fullscreenElement(currently prefixed in Chrome, Firefox, and IE)returns true if any of the elements are in fullscreen mode.
When your app is fullscreen you no longer have the browser's UI controlsavailable to you. This changes the way that users interact with yourexperience. They don't have the standard navigation controls such as Forwardsand Backwards; they don't have their escape hatch that is the Refresh button. It'simportant to cater for this scenario. You can use some CSS selectors to helpyou change the style and presentation of your site when the browser entersfullscreen mode.
<button id="goFS">Go fullscreen</button><script> var goFS = document.getElementById('goFS'); goFS.addEventListener( 'click', function () { document.body.requestFullscreen(); }, false, );</script>The above example is a little contrived; I've hidden all the complexity aroundthe use of vendor prefixes.
The actual code is a lot more complex. Mozillahas created a very useful script that you can use to toggle fullscreen. Asyou can see, the vendor prefix situation it is complex andcumbersome compared to the specified API. Even with the slightly simplified codebelow, it is still complex.
function toggleFullScreen() { var doc = window.document; var docEl = doc.documentElement; var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen; var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen; if ( !doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement ) { requestFullScreen.call(docEl); } else { cancelFullScreen.call(doc); }}We web developers hate complexity. A nice high-level abstract API you can useis Sindre Sorhus' Screenfull.js modulewhich unifies the two slightly different JS API's and vendor prefixes into oneconsistent API.
Fullscreen API Tips
Making the document fullscreen
It is natural to think that you take the body element fullscreen, but if you areon a WebKit or Blink based rendering engine you will see it has an odd effect ofshrinking the body width to the smallest possible size that will contain all thecontent. (Mozilla Gecko is fine.)
To fix this, use the document element instead of the body element:
document.documentElement.requestFullscreen();Making a video element fullscreen
To make a video element fullscreen is exactly the same as making any otherelement fullscreen. You call the requestFullscreen method on the videoelement.
<video id="videoElement"></video><button id="goFS">Go Fullscreen</button><script> var goFS = document.getElementById('goFS'); goFS.addEventListener( 'click', function () { var videoElement = document.getElementById('videoElement'); videoElement.requestFullscreen(); }, false, );</script>If your <video> element doesn't have the controls attribute defined,there's no way for the user to control the video once they are fullscreen. Therecommended way to do this is to have a basic container that wraps the video andthe controls that you want the user to see.
<div id="container"> <video></video> <div> <button>Play</button> <button>Stop</button> <button id="goFS">Go fullscreen</button> </div></div><script> var goFS = document.getElementById('goFS'); goFS.addEventListener( 'click', function () { var container = document.getElementById('container'); container.requestFullscreen(); }, false, );</script>This gives you a lot more flexibility because you can combine the containerobject with the CSS pseudo selector (for example to hide the "goFS" button.)
<style> #goFS:-webkit-full-screen #goFS { display: none; } #goFS:-moz-full-screen #goFS { display: none; } #goFS:-ms-fullscreen #goFS { display: none; } #goFS:fullscreen #goFS { display: none; }</style>Using these patterns, you can detect when fullscreen is running and adapt youruser interface appropriately, for example:
- By providing a link back to the start page
- By Providing a mechanism to close dialogs or travel backwards
Launching a page fullscreen from home screen
Launching a fullscreen web page when the user navigates to it is not possible.Browser vendors are very aware that a fullscreen experience on every page loadis a huge annoyance, therefore a user gesture is required to enter fullscreen.Vendors do allow users to "install" apps though, and the act of installing is asignal to the operating system that the user wants to launch as an app on theplatform.
Across the major mobile platforms it is pretty easy to implement using eithermeta tags, or manifest files as follows.
iOS
Since the launch of the iPhone, users have been able to install Web Apps tothe home screen and have them launch as full-screen web apps.
<meta name="apple-mobile-web-app-capable" content="yes" />If content is set to yes, the web application runs in full-screen mode;otherwise, it does not. The default behavior is to use Safari to display webcontent. You can determine whether a webpage is displayed in full-screen modeusing the window.navigator.standalone read-only Boolean JavaScript property.
Apple
Chrome for Android
The Chrome team has recently implemented a feature that tells the browser tolaunch the page fullscreen when the user has added it to the home screen. It issimilar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes" />You can set up your web app to have an application shortcut icon added to adevice's home screen, and have the app launch in full-screen "app mode" usingChrome for Android's "Add to Home screen" menu item.
Google Chrome
A better option is to use the Web App Manifest.
Web App Manifest (Chrome, Opera, Firefox, Samsung)
The Manifest for Web applicationsis a simple JSON file that gives you, thedeveloper, the ability to control how your app appears to the user in the areasthat they would expect to see apps (for example the mobile home screen), directwhat the user can launch and, more importantly, how they can launch it. In thefuture the manifest will give you even more control over your app, but right nowwe are just focusing on how your app can be launched. Specifically:
- Telling the browser about your manifest
- Describing how to launch
Once you have the manifest created and it is hosted on your site, all you needto do is add a link tag from all your pages that encompass your app, as follows:
<link rel="manifest" href="/manifest.json" />Chrome has supported Manifests since version 38 for Android (October 2014)and it gives you the control over how your web app appears when it is installedto the home screen (via the short_name, name and icons properties) and how itshould be launched when the user clicks on the launch icon (via start_url,display and orientation).
An example manifest is shown below. It doesn't show everything that can be in amanifest.
{ "short_name": "Kinlan's Amaze App", "name": "Kinlan's Amazing Application ++", "icons": [ { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone", "orientation": "landscape"}This feature is entirely progressive and allows you create better, moreintegrated experiences for users of a browser that supports the feature.
When a user adds your site or app to the home screen, there is an intent by theuser to treat it like an app. This means you should aim to direct the user tothe functionality of your app rather than a product landing page. For example,if the user is required to sign-in to your app, then that is a good page tolaunch.
Utility apps
The majority of utility apps will benefit from this immediately. For thoseapps you'll likely want them launched standalone just alike every other appon a mobile platform. To tell an app to launch standalone, add this the WebApp Manifest:
"display": "standalone"Games
The majority of games will benefit from a manifest immediately. The vastmajority of games will want to launch full-screen and forced a specificorientation.
If you are developing a vertical scroller or a game like Flappy Birds then youwill most likely want your game to always be in portrait mode.
"display": "fullscreen", "orientation": "portrait"If on the other hand you are building a puzzler or a game like X-Com, then youwill probably want the game to always use the landscape orientation.
"display": "fullscreen", "orientation": "landscape"News sites
News sites in most cases are pure content-based experiences. Most developersnaturally wouldn't think of adding a manifest to a news site. The manifestwill let you define what to launch (the front page of your news site) andhow to launch it (fullscreen or as a normal browser tab).
The choice is up to you and how you think your users will like to access yourexperience. If you want your site to have all the browser chrome that you wouldexpect a site to have, you can set the display to browser.
"display": "browser"If you want your news site to feel like the majority of news-centric apps treattheir experiences as apps and remove all web-like chrome from the UI, you cando this by setting display to standalone.
"display": "standalone"Fake it: auto-hide the address bar
You can "fake fullscreen" by auto-hiding the address bar as follows:
window.scrollTo(0, 1);This is a pretty simple method, the page loads and the browser bar is told toget out of the way. Unfortunately it is not standardized and not wellsupported. You also have to work around a bunch of quirks.
For example browsers often restore the position on the page when the usernavigates back to it. Using window.scrollTo overrides this, which annoysthe user. To work around this you have to store the last position inlocalStorage, and deal with the edge cases (for example, if the user has thepage open in multiple windows).
UX guidelines
When you are building a site that takes advantage of full screen there are anumber of potential user experience changes that you need to be aware of tobe able to build a service your users will love.
Don't rely on navigation controls
iOS does not have a hardware back button or refresh gesture. Therefore you mustensure that users can navigate throughout the app without getting locked in.
You can detect if you are running in a fullscreen mode or an installed modeeasily on all the major platforms.
iOS
On iOS you can use the navigator.standalone boolean to see if the user haslaunched from the home screen or not.
if (navigator.standalone == true) { // My app is installed and therefore fullscreen}Web App Manifest (Chrome, Opera, Samsung)
When launching as an installed app, Chrome is not running in true fullscreenexperience so document.fullscreenElement returns null and the CSS selectorsdon't work.
When the user requests fullscreen via a gesture on your site, the standardfullscreen API's are available including the CSS pseudo selector that lets youadapt your UI to react to the fullscreen state like the following
selector:-webkit-full-screen { display: block; // displays the element only when in fullscreen}selector { display: none; // hides the element when not in fullscreen mode}If the users launches your site from the home screen the display-mode mediaquery will be set to what was defined in the Web App Manifest. In the case ofpure fullscreen it will be:
@media (display-mode: fullscreen) {}If the user launches the application in standalone mode, the display-modemedia query will be standalone:
@media (display-mode: standalone) {}Firefox
When the user requests fullscreen via your site or the user launches the app infullscreen mode all the standard fullscreen API's are available, including theCSS pseudo selector, which lets you adapt your UI to react to the fullscreen statelike the following:
selector:-moz-full-screen { display: block; // hides the element when not in fullscreen mode}selector { display: none; // hides the element when not in fullscreen mode}Internet Explorer
In IE the CSS pseudo class lacks a hyphen, but otherwise works similarly toChrome and Firefox.
selector:-ms-fullscreen { display: block;}selector { display: none; // hides the element when not in fullscreen mode}Specification
The spelling in the specification matches the syntax used by IE.
selector:fullscreen { display: block;}selector { display: none; // hides the element when not in fullscreen mode}Keep the user in the fullscreen experience
The fullscreen API can be a little finicky sometimes. Browser vendors don't wantto lock users in a fullscreen page so they have developed mechanisms to breakout of fullscreen as soon as they possibly can. This means you can't build afullscreen website that spans multiple pages because:
- Changing the URL programmatically by using
window.location = "http://example.com"breaks out of fullscreen. - A user clicking on an external link inside your page will exit fullscreen.
- Changing the URL via the
navigator.pushStateAPI will also break out of thefullscreen experience.
You have two options if you want to keep the user in a fullscreen experience:
- Use the installable web app mechanisms to go fullscreen.
- Manage your UI and app state using the # fragment.
By using the #syntax to update the url (window.location = "#somestate"), andlistening to the window.onhashchange event you can use the browser's ownhistory stack to manage changes in the application state, allow the user to usetheir hardware back buttons, or offer a simple programmatic back buttonexperience by using the history API as follows:
window.history.go(-1);Let the user choose when to go fullscreen
There is nothing more annoying to the user than a website doing somethingunexpected. When a user navigates to your site don't try and trick them intofullscreen.
Don't intercept the first touch event and call requestFullscreen().
- It is annoying.
- Browsers may decided to prompt the user at some point in the future aboutallowing the app to take up the fullscreen.
If you want to launch apps fullscreen think about using the installexperiences for each platform.
Don't spam the user to install your app to a home screen
If you plan on offering a fullscreen experience via the installed app mechanismsbe considerate to the user.
- Be discreet. Use a banner or footer to let them know they can install theapp.
- If they dismiss the prompt, don't show it again.
- On a users first visit they are unlikely to want to install the app unlessthey are happy with your service. Consider prompting them to install aftera positive interaction on your site.
- If a user visits your site regularly and they don't install the app, they areunlikely to install your app in the future. Don't keep spamming them.
Conclusion
While we don't have a fully standardized and implemented API, using some of theguidance presented in this article you can easily build experiences that takeadvantage of the user's entire screen, irrespective of the client.
