如何在 iPad Safari WebApp 全屏模式下隐藏自 iPadOS 13 以来出现的新 url 栏？

Question

iPadOS 13 现在在通过 'Add to Home Screen' 在 Safari 上安装 WebApp 时显示 white/grey 栏，即使添加了 apple-touch-fullscreen 元标记。该栏包括一个用于调整字体大小和请求桌面站点的菜单，但影响了可用的屏幕大小，因此用户现在必须滚动才能查看应用程序菜单。

有什么方法可以隐藏此栏，例如强制选择 Desktop/Mobile 站点以便不需要选择？

Answer 1

我找到了解决方法。

即使添加了 apple-touch-fullscreen 元标记，

iPadOS 也会向 Web 应用添加 url 栏，但现在使用 manifest.json 文件与渐进式网络应用程序 (PWA) 一起使用以检测全屏模式。它在 IOS 13 版本之前支持此功能，但现在才需要全屏体验。

在我的应用程序中，manifest.json link 标签 <link rel="manifest" href="manifest.json"> 仅在检测到 Google Chrome 时添加；更新它以在检测到 iPad 上的 Safari 时添加 link 导致灰色条被完全隐藏（请注意，iPad 检测在此版本中已更改，现在 mobile/desktop可以要求版本）

允许全屏的manifest.js文件如下所示（显示：“standalone”允许全屏）

{
    "name": "MyApp",
    "short_name": "MyApp",
    "description": "MyApp description",
    "version": "0.0.0.1",
    "manifest_version": 2,
    "default_locale": "en-GB",
    "author": "Christopher Dean",
    "start_url": "Home.aspx",
    "display": "standalone",
    "orientation": "landscape",
    "theme_color": "#015174",
    "background_color": "#F7F4F3",
    "icons": [
    {
      "src": "images/app-icon-chrome.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/app-icon-tiny.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "images/app-icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/app-icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
    ],
    "app": {
     "urls": [
       "http://MyApp/Home.aspx"
     ],
     "launch": {
       "web_url": "http://MyApp/"
     },
     "background": {
       "scripts": [ "chrome.js" ]
     },
     "permissions": [ 
      "unlimitedStorage",
      "notifications",
      "fullscreen"
     ]
    }
}

如何在 iPad Safari WebApp 全屏模式下隐藏自 iPadOS 13 以来出现的新 url 栏？

How can I hide the new url bar on iPad Safari WebApp fullscreen mode, appearing since iPadOS 13?

html

safari

ipados

ipados13