html - 如何隐藏自 iPadOS 13 以来出现的 iPad Safari WebApp 全屏模式的新网址栏？

Question

iPadOS 13 现在在通过 Safari 上的“添加到主屏幕”安装 Web 应用程序时显示白色/灰色条，即使添加了 apple-touch-fullscreen 元标记也是如此。该栏包括一个用于调整字体大小和请求桌面站点的菜单，但影响了可用的屏幕大小，因此用户现在必须滚动才能查看应用程序菜单。

有什么方法可以隐藏此栏，例如强制桌面/移动站点中的任何一个站点不需要选择？

Answer 1

我已经找到了解决办法。

即使添加了 apple-touch-fullscreen 元标记，iPadOS 也会将 url 栏添加到 Web 应用程序，但现在使用与渐进式 Web 应用程序 (PWA) 一起使用的 manifest.json 文件来检测全屏模式。它在 IOS 13 版本之前支持此功能，但现在才需要全屏体验。

在我的应用程序中，manifest.json 链接标记 <link rel="manifest" href="manifest.json">仅在检测到 Google Chrome 时添加；更新它以在检测到 iPad 上的 Safari 时添加链接导致灰色条被完全隐藏(请注意，此版本中的 iPad 检测已更改，现在可以请求移动/桌面版本)

允许全屏的manifest.js文件如下所示(display: "standalone"allows fullscreen)

{
    "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"
     ]
    }
}