在Ionic PWA中，iOS闪屏元标签无法使用。

Question

我正在开发一个Ionic PWA，我想在safari浏览器上显示启动图像，但它不工作。

我已经在index.html中添加了apple-touch-startup-image，但是在设备上和xcode模拟器上都没有工作。图片在index.html的根目录下。

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="Mg Corp">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">

  <link rel="apple-touch-icon" sizes="152x152" href="assets/icon/icon-152.png" type="image/png">
  <link rel="apple-touch-icon" sizes="167x167" href="assets/icon/icon-167.png" type="image/png">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/icon/icon-180.png" type="image/png">

  <link rel="mask-icon" href="assets/icon/icon-512" color="#5bbad5">

  <!-- 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) and (orientation: landscape)" href="iphonexsmax_splash.png" type="image/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) and (orientation: landscape)" href="iphonexr_splash.png" type="image/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) and (orientation: landscape)" href="iphonex_splash.png" type="image/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) and (orientation: landscape)" href="iphoneplus_splash.png" type="image/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) and (orientation: landscape)" href="iphone6_splash.png"type="image/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) and (orientation: landscape)" href="ipadpro2_splash.png" type="image/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) and (orientation: landscape)" href="ipadpro3_splash.png" type="image/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) and (orientation: landscape)" href="ipadpro1_splash.png" type="image/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) and (orientation: landscape)" href="ipad_splash.png" type="image/png" />

Answer 1

或者你可以尝试用命令行自动生成所有的assets

https:/github.comonderceylanpwa-asset-generator。