为了使您的渐进式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的更多建议：
