隐藏iOS移动Safari 13（iPhone X和11）中全屏Web应用程序的状态/位置栏

Question

在2019年，我看到了很多有关在iOS中为全屏移动Web应用删除/隐藏状态/位置栏的老问题。我已经尝试了几种解决方案，但是没有任何效果。我正在运行在iPhone X和iPhone 11上运行的iOS Safari版本13。

我尝试了以下方法：

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">

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

我见过苹果建议不要在新手机上隐藏位置栏的地方，因为新设备上的屏幕空间更大。因此，他们是否决定采取强迫这种偏爱的自由？

Answer 1

Web应用程序设计为具有类似于本机应用程序的外观和行为，例如，可以缩放以适合iOS上的整个屏幕。您可以通过在用户将其添加到主屏幕时使其看起来像本机应用程序，从而进一步针对iOS上的Safari定制Web应用程序。通过使用其他平台会忽略的iOS设置来执行此操作。

Apple-Safari Web内容指南-配置Web应用程序

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

仅当用户首先将PWA添加到其iOS主屏幕（使用“共享”菜单），然后从那里打开应用程序时，才会出现类似应用程序的全屏体验。