PWA 无法在 iphone/ipad 上以全屏模式打开
Posted
技术标签:
【中文标题】PWA 无法在 iphone/ipad 上以全屏模式打开【英文标题】：PWA not opening in full screen mode on iphone/ipad 【发布时间】：2018-10-30 09:36:50 【问题描述】：我在 ios 上浏览了几篇与 PWA 相关的文章，但仍然无法弄清楚为什么在将应用程序添加到主屏幕后会看到地址栏。如果有人可以帮助我，我会很高兴。
我的索引文件中的元标记
<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"
【问题讨论】：
您可以查看link 中给出的解决方法。由于您已经在清单文件中使用了"display": "standalone"，您可以尝试"display": "fullscreen" 看看它是否有效。
【参考方案1】：
万一有人偶然发现这篇文章。截至 04-2020 iOS 不会读取清单文件来设置 PWA 屏幕模式。相反，需要添加他们的meta 标签：
<meta name="apple-mobile-web-app-capable" content="yes">
用于以全屏模式查看应用程序。并且：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
用于将状态栏设置为与页面<body> 相同的颜色。还有其他可用选项：black 和 white。
【讨论】：
你有这个的参考链接吗？以上是关于PWA 无法在 iphone/ipad 上以全屏模式打开的主要内容，如果未能解决你的问题，请参考以下文章
当链接中引用视频时，是不是可以在 iPad 上以全屏模式打开 .mp4？
HTML5 视频控件在 Android 设备上以全屏模式消失
PyQt5 应用在 TeamViewer 下无法使用全屏模式