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

问题描述 投票:0回答:2

在之前的iOS(12及之前)或任何Android手机中,我们可以使用Safari(或Android中的任何浏览器)中的[添加到主屏幕]并通过以下技术隐藏PWA的工具栏:

  1. 在 Index.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>

  1. 在根目录下创建文件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

ios vue.js safari progressive-web-apps
2个回答
0
投票

试试这个,它对我有用

iOS 16.6

<meta name="apple-mobile-web-app-capable" content="yes" />

-1
投票

这个方法可以智能且高效地适合您的情况吗? 使用这个最小的网络清单,菜单栏也会消失吗?

{ "name": "My Super App", "short_name": "My App", "display": "standalone", "scope": "/my-app-path/", "start_url": "/my-app-path/" }
    
© www.soinside.com 2019 - 2024. All rights reserved.