简体   繁体   中英

Hide status/location bar for full-screen web apps in iOS mobile Safari 13 (iPhone X and 11)

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?

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.

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM