[PWA] Customize the Splash Screen of a PWA built with create-react-app
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.
相关文章
- 跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
- uni-app实战---社区交友APP(环境搭建)
- app加固_360加固保手机版
- WKWebView 加载 Uni-App 导出的本地 H5
- 超级app+轻应用能带来什么改变
- vue组件 - 监听APP手势滑动
- react的jsx和React.createElement是什么关系?面试常问5
- Fiddler - 夜神模拟器证书安装App抓包
- APP Uploader-iOS APP上架到App Store的辅助工具
- 如何在自己APP中接入在线客服系统,App接入第三方在线客服系统方法
- 使用jqMobi开发app基础:定义header详解手机开发
- Linux安卓应用:一种新的体验(linux安卓app)
- 最佳Linux学习之路:一款轻松促进学习的App(学linux的app)
- 探索React框架中MySQL数据库的应用(react mssql)
- App应用提交到MySQL中的实践与探索(app提交mysql)
- 极速开发APP与MySQL的无缝连接(app 如何连mysql)
- 轻松学习MYSQL下载文档App分享(MYSQL下载文档app)
- Oracle中APP的强力删除(oracle中app删除)
- 开发Redis在APP开发中的应用(redis进行app)