如何在 iPadOS 13 后出现的 iPad Safari WebApp 全屏模式下隐藏新的 url 栏？答案

【问题标题】：How can I hide the new url bar on iPad Safari WebApp fullscreen mode, appearing since iPadOS 13?如何在 iPadOS 13 后出现的 iPad Safari WebApp 全屏模式下隐藏新的 url 栏？
【发布时间】：2020-02-12 02:10:10
【问题描述】：

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

有什么办法可以隐藏这个栏，比如强制桌面/移动网站，这样就不需要选择了吗？

【问题讨论】：

标签： html safari ipados ipados13

【解决方案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文件如下图（显示：“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"
     ]
    }
}

【讨论】：