在 iOS 移动版 Safari 13（iPhone X 和 11）中隐藏全屏网络应用程序的 status/location 栏

Question

在 2019 年，我看到了很多关于 removing/hiding iOS 中的 status/location 栏的老问题，用于全屏移动网络应用程序。我已经尝试了几种我发现的解决方案，但没有任何效果。我是运行 iOS Safari 版本 13 运行 iPhone X 和 iPhone 11。这需要在用户不采取额外的几个步骤来添加的情况下发生它到主屏幕。

我试过以下方法：

minimal-ui 元标记：

<meta name="viewport" content="minimal-ui">

滚动到 0,1:

setTimeout( function () {
    window.scrollTo(0, 1);
}, 1000);

apple-mobile-web-app-capable 元标记：

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

我也结合了所有这些，但仍然没有运气。有什么改变吗？隐藏状态栏的唯一方法是将设备垂直旋转并返回水平吗？

我看到 Apple 建议不要在较新的手机上隐藏位置栏，因为较新的设备上有更多的可用屏幕空间。那么他们是否决定冒昧地将这种偏好强加于我们？

Answer 1

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

我在我的 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">

只有当用户首先 adds the PWA to their iOS home screen（使用“共享”菜单），然后从那里打开应用程序时，才会出现类似应用程序的全屏体验。

在 iOS 移动版 Safari 13（iPhone X 和 11）中隐藏全屏网络应用程序的 status/location 栏

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

javascript

iphone

mobile-safari