iOS开机画面元标记在Ionic PWA中不起作用

时间:2019-09-11 19:59:33

标签: ionic-framework ionic4 progressive-web-apps

我正在开发Ionic PWA,我想在野生动物园浏览器中显示启动图像,但是它不起作用。

我已经在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" />

1 个答案:

答案 0 :(得分:0)

或者您可以尝试使用命令行自动为您生成所有资产

https://github.com/onderceylan/pwa-asset-generator