为什么部分网页添加到主屏幕可以全屏打开,比如 Heimdall 添加到主屏幕就可以全屏打开。大部分网站都不行。 需要什么条件才可以触发?
1
MossFox 2023-03-30 14:38:29 +08:00
需要网页开发者主动适配才行。
|
2
tudouxian 2023-03-30 14:46:12 +08:00
网页 ? pwa ?不过在苹果上还不好使不清楚,好像苹果不太喜欢这项技术
|
4
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" } ] } |
5
MossFox 2023-03-30 15:10:13 +08:00 1
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 格式。 |
6
serafin OP 已经有大图标的情况下
实测只添加这个就可以了 <meta name="apple-mobile-web-app-capable" content="yes"> |
7
serafin OP <meta name="apple-mobile-web-app-capable" content="yes">
更正:添加这条以后就算没有任何图标也能全屏。 添加到桌面的图标就是这个网页的截图。 |
8
serafin OP 在 Android Chrome 用这条也可以添加到桌面,全屏打开。<meta name="apple-mobile-web-app-capable" content="yes">
|
9
shinsekai 2023-03-31 18:19:35 +08:00
有没有对不支持全屏打开的网站使其全屏打开的插件?
|
10
serafin OP @shinsekai 有。Web Clips 。 要用 https://apps.apple.com/it/app/apple-configurator/id1037126344
|