如何使用Vuetify为iOS添加启动屏幕

时间:2019-04-22 03:50:32

标签: vue.js splash-screen progressive-web-apps vuetify.js

您好,我正在尝试为我的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

这是我的密码https://rosedronesolutions.com,因此,请清除启动屏幕,这是您单击该应用程序且尚未加载您的应用程序时应显示的内容。

我很好奇我应该在初始屏幕和iPhone媒体尺寸中使用哪种正确的屏幕分辨率,因为分辨率和逻辑分辨率都很高,但是我所做的就是那个家伙在他的样本中所做的工作{ {3}},但在我的系统中无效。

说实话,我可能应该知道如何共享我的存储库,但我不知道。它的代码提交,但也许您根本不需要整个东西。这是我添加到index.html中的内容,然后将初始屏幕添加到公用文件夹中的初始屏幕

<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" />

0 个答案:

没有答案