iPhone web启动屏幕不工作

在iPhone web应用程序中，您可以定义一个自定义启动屏幕，该屏幕将在网站加载时显示（从主页上保存的书签图标加载网站时）。关键是让web应用程序的启动体验更像一个真正的iphone应用程序

我相信语法是这样的：

（位于页面的

部分）

其中splash.png是垂直方向的320x460图像

---

我似乎无法让它工作。。。有人对此有什么建议和窍门吗？

苹果没有太多关于这个主题的文档（请参阅）

有几件事需要注意：

• 您提供的代码段假定您的映像位于
• 这只适用于iPhone OS 3.0及更高版本
• 图像必须是PNG
• 只有在页面的DOM就绪后，才会显示图像

您还可以使用以下代码显式设置web app图标：

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

---

确保它是320x460像素

---

您已经说过了，但这是我的解决方案。

确保所有这些链接都在标题中的其他样式表之后。

如果在顶部有通知栏，iOS 4不会显示启动屏幕-例如，在使用个人热点（栓系）时。

您只能设置一个启动屏幕，否则它将失败。要选择ipad或iphone闪屏，您需要一点javascript

可用于本机应用程序的ipad横向启动屏幕不适用于web应用程序。iphone4的视网膜屏幕也不会启动。您只能选择ipad或iphone大小的splash。在link元素上设置size属性似乎在ipad上起作用。但拥有多个splash图像链接元素会导致iphone失败

启动屏幕的大小必须精确。iphone/ipod为320x460，ipad为1024x748。如果你需要一个横向斜杠屏幕，你需要在photoshop中旋转它，因为在应用程序重新启动时没有控制

要进行测试，最好先关闭应用程序缓存，然后使用charles proxy或类似工具限制带宽

<!-- status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iphone start up screens -->
<script type="application/javascript">
    var appl = document.createElement("link");
    appl.setAttribute('rel', 'apple-touch-startup-image');
    if(screen.width < 321 && window.devicePixelRatio == 1) {
      appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
      //setting @2x or a 640x920 image fails, just use the iphone splash screen
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
      appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
      //landscape fails as well, use standard ipad screen
    }
    document.getElementsByTagName("head")[0].appendChild(appl);
</script>

<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />

var appl=document.createElement（“链接”）；
appl.setAttribute（'rel'，'apple touch启动图像'）；
if（screen.width<321&&window.devicePixelRatio==1）{
appl.setAttribute（'href'，'img/icons/launch320x460.png'）；//iphone 3Gs或更低版本
}如果（screen.width<321&&window.devicePixelRatio==2）{
//设置@2x或640x920图像失败，只需使用iphone启动屏幕即可
}否则如果（屏幕宽度<769和数学绝对值（窗口方向）！=90）{
appl.setAttribute（'href'，'img/icons/launch1024x748.png'）；//ipad 2或更低版本（portait）
}如果（screen.width<769&&Math.abs（window.orientation）==90）{
//使用标准的ipad屏幕，景观也会失败
}
document.getElementsByTagName（“head”）[0].appendChild（appl）；

每当我遇到这个问题时，几乎总是由于为同一页面调用多个splashscreen或splashscreen不是320x460像素（确切地说）引起的。这应该可以做到：

<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />

但在调用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" />

---

您是对的，此代码必须在节中，并且图像必须为320x460像素，其不工作的原因是图片必须是20KB或25KB或更小的小文件。 我也有同样的问题，但是当我减少文件时，它就开始工作了

---

干杯

我让这个脚本运行起来了，但是iPad上的闪屏似乎有一个bug。如果我第一次在横向中启动web应用程序，两个启动屏幕都不会显示。如果我第一次以肖像的形式发布，那么闪屏可以工作，但风景永远不会工作。似乎我不是唯一一个有这个问题的人，在苹果论坛上看到这个帖子：有人能确认他们已经成功地在iPad HTML5网络应用程序上创建并显示了横向和纵向闪屏吗？