Menu
In 2019, I'm seeing a lot of old questions about removing/hiding the status/location bar in iOS for full screen mobile web apps. I've tried several solutions I've found, but nothing is working. I'm running iOS Safari version 13 running on iPhone X and iPhone 11. This needs to happen without the user taking the extra couple steps to add it to the home screen.
I've tried the following:
minimal-ui meta tag:
<meta name="viewport" content="minimal-ui">
Scrolling to 0,1:
setTimeout( function () {
window.scrollTo(0, 1);
}, 1000);
apple-mobile-web-app-capable meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
I have also combined all of these, and still no luck. Has something changed? Is it the only way to hide the status bar to rotate the device vertical and back to horizontal?
I've seen where Apple suggests not hiding the location bar on the newer phones due to more screen real estate available on newer devices. So did they decide to take the liberty of forcing this preference on us?
509
If you don't find much use for it and would like to see more of your wallpaper, there's a way you can get rid of it for good. While there is no default setting in iOS that will let you hide the status bar at the top of the screen, there is a jailbreak tweak that gives the ability to do so.
Hide Status Bar Icons on Your iPhone for a Cleaner Look in Apps & Wallpapers 1 Step 1: Install HideStatusBarItems#N#Open the Cydia app on your iPhone, tap the magnifying glass icon in the lower right,... 2 Step 2: Pick What Icons to Hide More ...
When viewing sites in Safari you do not have the ability to customize the status bar in any way. Previous versions of iOS offered the ability to view sites in full screen mode, but that was removed in iOS7, see
In order to change the iOS status bar of your progressive web app, you must use the apple-mobile-web-app-status-bar-style meta tag. Unfortunately, the number of ways to customize the status bar is fairly limited, but Apple offers three distinct settings: default, black, and black-translucent.
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
Apple - Safari Web Content Guide - Configuring Web Applications
I’m using these meta tags in my PWA, Emoji Bombs:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
The app-like full screen experience only comes on when a user first adds the PWA to their iOS home screen (using the Share menu), and then opens the app from there.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
