我正在开发一个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" />
或者你可以尝试用命令行自动生成所有的assets