iOS 如何添加网页到主屏幕可以全屏打开

[serafin]

为什么部分网页添加到主屏幕可以全屏打开，比如 Heimdall 添加到主屏幕就可以全屏打开。大部分网站都不行。 需要什么条件才可以触发?

[MossFox]

需要网页开发者主动适配才行。

[tudouxian]

网页 ？ pwa ？不过在苹果上还不好使不清楚，好像苹果不太喜欢这项技术

[serafin]

@MossFox 就是想问我需要适配什么

[goonervs]

head 里加上
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="manifest.json">

manifest.json
{
"name": "App",
"short_name": "app",
"start_url": "/",
"display": "fullscreen",

"icons": [
{
"src": "/icons/icon.png",
"sizes": "72x72",
"type": "image/png"
}
]
}

[MossFox]

HTML Head:
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="192x192" href="/image/icon-192.png">
<link rel="apple-touch-icon" href="/image/icon-512.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

其中一部分设置 (比如 apple-mobile-web-app-status-bar-style) 按照实际需求改一下。可用的值可以查到。

manifest.json 可以参考我之前整的玩意：
https://img.mowl.cc/manifest.json

然后就行了。另外就是留意一下 apple-touch-icon 只支持 PNG 格式。

[serafin]

已经有大图标的情况下
实测只添加这个就可以了
<meta name="apple-mobile-web-app-capable" content="yes">

[serafin]

<meta name="apple-mobile-web-app-capable" content="yes">
更正：添加这条以后就算没有任何图标也能全屏。 添加到桌面的图标就是这个网页的截图。

[serafin]

在 Android Chrome 用这条也可以添加到桌面，全屏打开。<meta name="apple-mobile-web-app-capable" content="yes">

[shinsekai]

有没有对不支持全屏打开的网站使其全屏打开的插件？

[serafin]

@shinsekai 有。Web Clips 。 要用 https://apps.apple.com/it/app/apple-configurator/id1037126344