Setup your website to allow full-screen on iOS

To make a website open full screen from the iOS home screen, add the apple-mobile-web-app-capable meta tag to your pages. Once that tag is in place, the icon added via “Add to Home Screen” launches the site without any Safari UI.

While using the iPad Pro I decided to add a few sites to the home screen. It’s not something I usually do on the iPhone, although the same thing works on the iPhone too:

Add the site to the home screen

Press the share button (the one in the middle at the bottom) to show the options panel:

Choose “Add to Home Screen”:

Now you’ll see an app on the home screen with the site favicon.

Clicking it will just open the site in Safari, with the address bar and all the usual browser chrome.

The meta tag that enables full screen

But if you add this meta tag to the page:

<meta name="apple-mobile-web-app-capable" content="yes">

Clicking the app icon will open the site in full screen:

This works on the iPad as well:

This will help you save screen real estate, as the Safari UI would be useless, and will also make the overall app use experience much better.

Of course this has to be supported by the site/app developers, otherwise you can’t make it full screen. The tag has to be in the HTML of the page. There’s nothing the person adding the icon can do on their side.

Things to watch out for

iOS reads the meta tag at the moment you add the site to the home screen. If you added the icon before the tag was in place, it keeps opening in Safari. Remove the icon and add it again, and it will pick up the full screen mode.

Remember that full screen means no browser UI at all. No back button, no reload, no address bar. If your site relies on the back button for navigation, make sure it offers its own navigation links, or users will get stuck.

You can also control the look of the status bar with a companion tag:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

This only has an effect when the site runs in full screen mode.