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

Posted 2023-02-24

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

【英文标题】：Hide status/location bar for full-screen web apps in iOS mobile Safari 13 (iPhone X and 11)

【发布时间】：2019-11-04 20:13:37

【问题描述】：

在 2019 年，我看到了很多关于在 ios 中为全屏移动网络应用程序移除/隐藏状态/位置栏的老问题。我已经尝试了几种我发现的解决方案，但没有任何效果。我在 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">

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

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

【问题讨论】：

当您说“全屏移动网络应用程序”时，为了更好地理解上下文：您是在使用 requestFullscreen 请求全屏模式的常规网站上尝试此操作还是作为渐进式网络应用程序？

啊，谢谢你的提问。我的意思是渐进式网络应用程序。

您是否将 PWA 添加到主屏幕，然后从那里打开它？

主屏幕？这是在 iOS Safari 中。

是的。看我的回答:)

【参考方案1】：

Web 应用程序的外观和行为方式与本机应用程序类似——例如，它被缩放以适应 iOS 上的整个屏幕。 当用户将其添加到主屏幕时，您可以进一步为 iOS 上的 Safari 定制您的 Web 应用程序，使其看起来像本机应用程序。为此，您可以使用其他平台忽略的 iOS 设置。

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（使用共享菜单），然后从那里打开应用程序时，才会出现类似应用程序的全屏体验。

【讨论】：

只有这样吗？ ? 我不想让我的用户这样做。我想我很清楚这需要在浏览器中发生。

是的，it’s the only way right now on iOS。 android 支持自动提示用户，但 iOS 目前不支持。 PWA 开发人员有时在 iOS 上做的是添加他们自己的提示并引导用户使用“添加到主屏幕”功能。它不漂亮，但这就是我们得到的:)

同样准确地说，用户首先在 Safari 中打开您的 PWA 网站，然后点击“共享”图标，然后点击“添加到主屏幕”。这并不像必须从头开始那样糟糕，但仍然足够糟糕。

这让我对苹果失去了更多的爱。

我想到的唯一其他选择是说服用户向上滚动一点（需要足够的高度），以便地址栏最小化并且工具栏被隐藏。