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

Question

In previous iOS (12 and before) or any Android phone, we are able to use the [Add to Home Screen] in Safari (or any browser in Android) and hide the toolbars of a PWA by using the following techniques:在之前的 iOS（12 及之前）或任何 Android 手机中，我们可以使用 Safari（或 Android 中的任何浏览器）中的 [添加到主屏幕]（或 Android 中的任何浏览器）使用以下技术隐藏工具栏：

in Index.html:在索引中。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>

Create a file manifest.json in the root directory, with the following content:在根目录下创建文件manifest.json，内容如下：

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

However, since iOS 13, the above method does not work anymore, the toolbars persist and we need to click the aA on the left hand side of the Address Bar, then choose [Hide Tool Bar] EVERY TIME, in order to hide the toolbars of the PWA.但是，由于iOS 13，上述方法不再起作用，工具栏仍然存在，我们需要单击地址栏左侧的aA，然后每次选择[隐藏工具栏]，以隐藏工具栏的 PWA。

So how can we hide the toolbars?那么我们如何隐藏工具栏呢？

Edit编辑

Just want to emphasize that the following js code does not work as well:只是想强调一下，下面的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>

or或者

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

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

</body>

And the solution provided by this link is also not working:此链接提供的解决方案也不起作用：

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

Answer 1

Can be smart and efficiently for your case this method ?对于您的情况，这种方法可以智能高效吗？ Using this minimal webmanifest the menu bar disappear for you too?使用这个最小的 webmanifest 菜单栏也会消失吗？

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

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

问题描述

Edit编辑

1 个解决方案

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

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

问题描述

Edit编辑

1 个解决方案

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

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