[PWA] Customize the Splash Screen of a PWA built with create

发布时间：2020-12-15 20:37:18 所属栏目：百科来源：网络整理

导读：Android displays a splash screen for PWAs based on the icons and names you provide,but iOS just displays a solid color splash screen for installed PWAs by default. We‘ll make a new splash screen image for every iOS device resolution size

Android displays a splash screen for PWAs based on the icons and names you provide,but iOS just displays a solid color splash screen for installed PWAs by default.

We‘ll make a new splash screen image for every iOS device resolution size that we want to support,and then we can make a?link?tag in?index.html?to specify those images as the splash screen for each device resolution.

Also,make sure to remove?background_color?from the manifest - or it may overwrite the splash screen images on iOS.

For Splash screen,it use 512*512 image for Andorid.

For IOS we need to add image for splash screen,no other way around currently.

First,we must tell iOS that the app is?apple-mobile-web-app-capable?with a?meta?tag.

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

Then we can specify each of those launch images as the image for that resolution.

<link rel="apple-touch-startup-image" href="splash_640x1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_750x1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1242x2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1125x2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1536x2048.jpg" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1668x2224.jpg" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_2048x2732.jpg" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Finally,in?manifest.json,we have to actually remove the "background_color" setting first. Otherwise,that will override all of our images.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!