在之前的iOS(12及之前)或任何Android手机中,我们可以使用Safari(或Android中的任何浏览器)中的[添加到主屏幕]并通过以下技术隐藏PWA的工具栏:
<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>
{
"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>
此链接提供的解决方案也不起作用:
试试这个,它对我有用
iOS 16.6
<meta name="apple-mobile-web-app-capable" content="yes" />
这个方法可以智能且高效地适合您的情况吗? 使用这个最小的网络清单,菜单栏也会消失吗?
{
"name": "My Super App",
"short_name": "My App",
"display": "standalone",
"scope": "/my-app-path/",
"start_url": "/my-app-path/"
}