vue.js - 如何使用 Vuetify 为 iOS 添加启动画面

Question

嗨，我正在尝试为我的 Vuetify PWA 创建启动画面，但它不起作用。我个人使用的是 iPhone XS，无论出于何种原因，它都无法正常工作。

本教程适用于我的手机，我按照他的做法https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

但是，他没有使用 vue 或 Vuetify，这可能会有所不同。我也查看了这个使用 vue 的人，但该方法对我不起作用，或者只是在图标https://medium.com/@eder.ramirez87/modern-pwa-with下的清单中添加启动画面-vue-cli-3-vuetify-firestore-workbox-part-1-974383be5540

老实说，我没有阅读他的整个项目，所以也许他甚至没有启动画面，尽管链接看起来被称为启动画面。他的存储库是https://github.com/Eder87rh/cropchien/blob/master/public/manifest.json

这是我的 pwa https://rosedronesolutions.com，所以为了清楚起见，启动屏幕是当您单击应用程序并且尚未加载您的应用程序时应该显示的内容。

我很好奇我应该在启动画面和 iPhone 媒体尺寸中使用什么正确的屏幕分辨率，因为有类似的分辨率和逻辑分辨率，但无论我做了什么，那个人在他的示例中所做的工作https:// pwa-splash.now.sh/但在我的没有工作。

老实说，我可能应该知道如何共享我的存储库，但我不知道。它在代码提交上，但也许你并不需要整个事情。这是我添加到 index.html 中的内容，然后将启动画面添加到名为 splashscreens 的公共文件夹中

<link href="splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Rose Drone" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

标签： vue.jssplash-screenprogressive-web-appsvuetify.js