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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 930 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

添加

打开

屏幕

heimdall

10 条回复 2023-03-31 18:47:55 +08:00

MossFox

2023-03-30 14:38:29 +08:00

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

tudouxian

2023-03-30 14:46:12 +08:00

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

serafin

2023-03-30 14:55:39 +08:00

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

goonervs

2023-03-30 15:07:29 +08:00

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

2023-03-30 15:10:13 +08:00

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

2023-03-30 15:30:29 +08:00

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

serafin

2023-03-30 19:56:47 +08:00

serafin

2023-03-31 06:05:07 +08:00

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

shinsekai

2023-03-31 18:19:35 +08:00

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

serafin

2023-03-31 18:47:55 +08:00

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