Setup your website to allow full-screen on iOS

By

On iOS 26 and later, Home Screen sites open as web apps by default. The apple-mobile-web-app-capable meta tag is optional legacy guidance for older iOS.

~~~

On iOS 26 and iPadOS 26, a site you add to the Home Screen opens as a web app by default, with no Safari address bar or toolbar. You don’t have to change anything on your site to get that. Apple announced the change at WWDC 2025, and it matches what macOS has done since 2023: every site added to the Dock opens as a web app.

Users who prefer a plain bookmark can turn off the Open as Web App switch, and the icon opens the site in Safari instead. You don’t need a web app manifest for any of this, although if you have one its icons and settings are used.

Before iOS 26, this only happened when the page asked for it, with the apple-mobile-web-app-capable meta tag or with a web app manifest whose display is standalone. Without one of those, tapping the icon opened the site in Safari, address bar and all.

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

Open the site in Safari, press the share button and choose “Add to Home Screen”.

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

On iOS 26 tapping it opens the site as a web app. On older iOS, without the meta tag below, it opens in Safari with the address bar and the usual browser chrome.

The meta tag (older iOS)

If you still need to support iOS versions before 26, add this meta tag to your pages:

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

On those versions, tapping the app icon then opens the site in full screen. This works on the iPad as well as on the iPhone.

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.

On older iOS 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.

If you’re building a full Progressive Web App, I cover service workers, the manifest, and offline support in The Complete Guide to Progressive Web Apps.

Things to watch out for

On older iOS, Safari 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 / standalone mode.

Tagged: Mac · All topics

Want me to talk about your product? You can sponsor this site.

~~~

Related posts about mac: