当前位置: 首页 > news >正文

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"}]
}

http://www.dtcms.com/a/309822.html

相关文章:

  • 玩转ChatGPT:寻找仪器用户手册
  • TEM在量子点发光材料领域的应用-测试GO
  • 汇川ITS7100E触摸屏交互界面开发(一)调试事项说明
  • BIFU币富探索合规新路径 助力用户玩转RWA
  • 两步走解决家庭路由器无法上网
  • Java 根据多个 MM-dd 日期计算总时长(包含当日和次日)
  • python PIL图片转base64字符串
  • [极客大挑战 2019]RCE ME
  • RockAI 的破壁之战:Yan 架构如何啃下“端侧炼丹”硬骨头?
  • Vue3 setup、ref和reactive函数
  • 元策联盈:深耕金融领域,赋能行业发展​
  • 【Flutter3.8x】flutter从入门到实战基础教程(四):自定义实现一个自增的StatefulWidget组件
  • 磁力搜索+磁力下载!无需解释!直接上车!
  • 工作好用小工具积累
  • EGE 流量开关 LG 518 GSP P11237
  • 异步函数被调用多次,多次处理同一个文件导致占用,如何让异步函数按顺序执行?
  • 书生浦语第五期L0G2
  • 【音视频】WebRTC 中的RTP、RTCP、SDP、Candidate
  • Ubuntu-Server-24.04-LTS版本操作系统如何关闭自动更新,并移除不必要的内核
  • C++在类的构造函数中调用另一个构造函数
  • STM32CubeIDE新建项目过程记录备忘(四)EXTI外部中断
  • 网络编程-加密算法
  • Spring Boot 异步执行方式全解析:@Async、CompletableFuture 与 TaskExecutor 对比
  • 面试题:怎么理解 OSI 参考模型(开放式系统互联参考模型) 和 TCP/IP 模型(传输控制协议 / 网际协议模型 )
  • Node.js中Buffer的用法
  • Linux中Docker Swarm介绍和使用
  • 数据结构学习基础和从包装类缓存到泛型擦除的避坑指南
  • QT初入门-界面设置
  • Metamorph、LlamaFusion、MetaQuery论文解读
  • Linux的对称多处理(SMP)机制