safari添加主屏及PWA启动方式
再“添加到主屏幕”,想预定义名称,图标,还有打开页面自定义设置,操作如下:
html页面配置:
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><!--Web App Manifest(PWA 支持)--><link rel="manifest" href="/static/icon/manifest.json?v=202508010057"><!-- 自定义应用名称(优先于 <title>) --><meta name="apple-mobile-web-app-title" content="Game5757"><!-- 全屏模式 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 状态栏样式 --><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 自定义应用图标(支持多种尺寸) --><link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png"><link rel="apple-touch-icon" sizes="120x120" href="/static/icon/120x120.png"><link rel="apple-touch-icon" sizes="167x167" href="/static/icon/167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="/static/icon/180x180.png"><!--启动动画(Splash Screen)--><link rel="apple-touch-startup-image" href="/static/icon/1242x2688.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/1242x2688.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/static/icon/1242x2688.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/1242x2688.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/640x1136.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/static/icon/640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
manifest.json 配置参数:
{"name": "应用名称","short_name": "快捷名称","start_url": "/mobile",//启动路径设置,这个很有用的"display": "standalone","background_color": "#000000","theme_color": "#000000","orientation": "portrait","prefer_related_applications": false,"icons": [{"src": "/static/icon/72x72.png","sizes": "72x72","type": "image/png"},{"src": "/static/icon/96x96.png","sizes": "96x96","type": "image/png"},{"src": "/static/icon/144x144.png","sizes": "144x144","type": "image/png"},{"src": "/static/icon/152x152.png","sizes": "152x152","type": "image/png"},{"src": "/static/icon/180x180.png","sizes": "180x180","type": "image/png"},{"src": "/static/icon/192x192.png","sizes": "192x192","type": "image/png"},{"src": "/static/icon/256x256.png","sizes": "256x256","type": "image/png"},{"src": "/static/icon/384x384.png","sizes": "384x384","type": "image/png"},{"src": "/static/icon/512x512.png","sizes": "512x512","type": "image/png"}]
}