无法在iPhone/iPad上以全屏模式打开PWA [英] PWA not opening in full screen mode on iphone/ipad
问题描述
我浏览了几篇有关ios上PWA的文章，但仍然无法弄清为什么在将应用程序添加到主屏幕后看到地址栏.如果有人可以帮助我，我会感到很高兴.
I went through several articles related to PWA on ios but still not able to figure out why I am seeing address bar after adding an app to the home screen. I would be glad if someone could help me with this.
元标记
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="./assets/manifest.json">
<meta name="theme-color" content="#ffffff">
清单文件
{
"short_name": "Dashboard",
"name": "Dashboard",
"icons": [
{
"src": "logo.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/home",
"display": "standalone",
"theme_color": "#000",
"background_color": "#000"
}
推荐答案
以防有人迷失本文.从04-2020开始，iOS不会读取清单文件来设置PWA屏幕模式.相反，需要添加其 meta 标签:
In case anyone stumble on this article. As of 04-2020 iOS does not read the manifest file to set the PWA screen mode. Instead one needs to add their meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
用于以全屏模式查看应用程序.并且:
For viewing the app in full screen mode. And:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
用于将状态栏设置为与< body> 页面相同的颜色.还有其他选项: black 和 white .
For setting the status bar the same color as page <body>. There are other options available: black and white.
这篇关于无法在iPhone/iPad上以全屏模式打开PWA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
