I have 2 web apps with the same meta tags (for testing purposes) linking to the same file to use as a splash screen.
我有两个带有相同元标签(用于测试目的)的web应用程序链接到相同的文件作为启动屏幕。
one app is absolutely fine - not a worry and works fine anytime on any device.
一款应用程序绝对没问题——不用担心，任何设备都可以随时使用。
the other app does not want to know about it - how come the splash screen seems so temperamental??
另一个应用程序不想知道它——为什么溅屏看起来如此喜怒无常?
BTW - the app icon works fine, so I know the directory is set right - also note I am using the same image, so the specs for that are also correct.
顺便说一句，这个应用程序图标工作得很好，所以我知道这个目录已经设置好了——同时注意我使用的是相同的图像，所以规格也是正确的。
2 个解决方案
#1
2
I run into this problem quite a bit and it is almost always caused by calling more than one splashscreen or the splashscreen not being 320x460 pixels (exactly). This should do the trick:
我经常遇到这个问题，它几乎都是由调用多个splashscreen或splashscreen而不是320x460像素引起的。这应该可以做到:
<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />
But before calling the splashscreen, you should include these three lines of code as well:
但是在调用splashscreen之前，您还应该包含以下三行代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Having multiple web apps referencing the same splashscreen file shouldn't be a problem, but not the other way around.
有多个web应用程序引用相同的splashscreen文件不应该是一个问题，而不是相反。
#2
2
Regarding the 320x460 px remark made by the previous poster, you can actually specify a different splash image for retina-capable devices. This solution works for me:
关于之前海报中320x460像素的评论，你可以为支持视网膜的设备指定一个不同的飞溅图片。这个解决方案对我很有效:
<link rel="apple-touch-startup-image" href="img/splash/splash.png" media="screen and (max-device-width: 320px)">
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/splash/splash@2x.png">
Splash.png should be 320x460 px and splash@2x.png should be twice that, at 640x920 px.
飞溅。png应该是320x460 px和splash@2x。png应该是640x920的两倍。
#1
2
I run into this problem quite a bit and it is almost always caused by calling more than one splashscreen or the splashscreen not being 320x460 pixels (exactly). This should do the trick:
我经常遇到这个问题，它几乎都是由调用多个splashscreen或splashscreen而不是320x460像素引起的。这应该可以做到:
<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />
But before calling the splashscreen, you should include these three lines of code as well:
但是在调用splashscreen之前，您还应该包含以下三行代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Having multiple web apps referencing the same splashscreen file shouldn't be a problem, but not the other way around.
有多个web应用程序引用相同的splashscreen文件不应该是一个问题，而不是相反。
#2
2
Regarding the 320x460 px remark made by the previous poster, you can actually specify a different splash image for retina-capable devices. This solution works for me:
关于之前海报中320x460像素的评论，你可以为支持视网膜的设备指定一个不同的飞溅图片。这个解决方案对我很有效:
<link rel="apple-touch-startup-image" href="img/splash/splash.png" media="screen and (max-device-width: 320px)">
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/splash/splash@2x.png">
Splash.png should be 320x460 px and splash@2x.png should be twice that, at 640x920 px.
飞溅。png应该是320x460 px和splash@2x。png应该是640x920的两倍。