Привет! Я пытаюсь создать заставку для моего 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" />