iOS 13 [添加到主屏幕] 和 [隐藏工具栏]

Question

在之前的 iOS（12 及之前）或任何 Android 手机中，我们可以使用 Safari（或 Android 中的任何浏览器）中的 [添加到主屏幕]（或 Android 中的任何浏览器）使用以下技术隐藏工具栏：

在索引中。html：

<head>
    <meta name="viewport" content="viewport-fit=cover, width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <link rel="apple-touch-icon" href="/customicon.png"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="BGBG01">
    <meta name="apple-mobile-web-app-title" content="BGBG01">
    <meta name="msapplication-starturl" content="/">
    <link rel="manifest" href="manifest.json">
</head>

在根目录下创建文件manifest.json，内容如下：

{
  "name": "App Full Name",
  "short_name": "AppName",
  "lang": "zh-CN",
  "start_url": "/",
  "scope": "/",
  "display": "standalone"
}

但是，由于iOS 13，上述方法不再起作用，工具栏仍然存在，我们需要单击地址栏左侧的aA，然后每次选择[隐藏工具栏]，以隐藏工具栏的 PWA。

那么我们如何隐藏工具栏呢？

编辑

只是想强调一下，下面的js代码也不好用：

<script>
  if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    /* iOS hides Safari address bar */
    window.addEventListener("load",function() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 1000);
    });
  }
</script>

或者

<body>
<button id="goFS">Go fullscreen</button>

<script>
  var goFS = document.getElementById("goFS");
  goFS.addEventListener("click", function() {
      document.body.requestFullscreen();
  }, false);
</script>

</body>

此链接提供的解决方案也不起作用：

https://codepen.io/akikoo/pen/xdaic

Answer 1

对于您的情况，这种方法可以智能高效吗？ 使用这个最小的 webmanifest 菜单栏也会消失吗？

{
  "name": "My Super App",
  "short_name": "My App",
  "display": "standalone",
  "scope": "/my-app-path/",
  "start_url": "/my-app-path/"
}

iOS 13 [添加到主屏幕] 和 [隐藏工具栏]

问题描述

编辑

1 个解决方案

解决方案1
-1 2021-07-09 08:54:24

iOS 13 [添加到主屏幕] 和 [隐藏工具栏]

问题描述

编辑

1 个解决方案

解决方案1 -1 2021-07-09 08:54:24

解决方案1
-1 2021-07-09 08:54:24