给Progressive Web App应用程序添加自定义iOS启动画面

为了使您的渐进式Web应用程序在iOS设备上更加原生,您可以添加一个自定义启动画面,当用户启动您的应用程序时显示该屏幕。长期以来,Apple的Safari Web内容指南中记录了此功能,但事实证明,实施起来比看起来更具挑战性。事实上,它似乎在iOS 11.0之前根本不起作用。


要添加自定义启动屏幕,建议使用以下代码。

<link rel="apple-touch-startup-image" href="/launch.png">

没有提到的是,该href属性必须引用与使用该应用程序的iOS设备具有完全相同分辨率的图像。这里出现的问题是,有多个不同分辨率的iOS设备,不幸的是,我们不能简单地为不同大小的图像多次重复此代码。相反,我们需要使用该media属性来指定哪个启动图像适用于哪个设备。
将以下代码添加到head PWA的部分,以支持不同iOS设备的自定义启动画面。

<!-- iPhone Xs Max (1242px x 2688px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2688.png"> 
<!-- iPhone Xr (828px x 1792px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-828x1792.png"> 
<!-- iPhone X, Xs (1125px x 2436px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png"> 
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png"> 
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">  
<!-- iPad Pro 12.9" (2048px x 2732px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png"> 
<!-- iPad Pro 11” (1668px x 2388px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2388.png"> 
<!-- iPad Pro 10.5" (1668px x 2224px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png"> 
<!-- iPad Mini, Air (1536px x 2048px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

不要忘记,为了拥有自定义启动屏幕,您的应用程序需要支持移动网络应用程序,这可以使用以下元标记来完成。

<meta name="apple-mobile-web-app-capable" content="yes">

如果您需要帮助为PWA设置启动画面,请查看Appscope上的启动画面生成器
有关如何使您的PWA在iOS上更像原生APP的更多建议:

为iOS设计类似原生的Progressive Web Apps应用程序

给TA买糖
共{{data.count}}人
人已赞赏
技术文档

为iOS设计类似原生的Progressive Web Apps应用程序

2021-8-18 1:51:27

技术文档

更改Progressive Web App应用程序的iOS状态栏

2021-8-18 2:02:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索