Question

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

我相信语法是这样的：

<link rel="apple-touch-startup-image" href="/splash.png" />（放置在页面的<head>部分）。

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

我似乎无法让它发挥作用......有没有人对此有任何提示和技巧？

Answer 1

确保它是320x460像素。

你已经说过了，但那是我的解决方案。

Answer 2

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

可用于本机应用的ipad横向启动画面不适用于网络应用。 iphone4的视网膜闪屏也不会。您只能选择ipad或iphone尺寸的闪光灯。在link元素上设置size属性似乎适用于ipad。但是有多个启动图像链接元素会导致iphone失败。

启动画面大小必须准确。 iphone / ipod为320x460，ipad为1024x748。如果您需要横向斜线屏幕，则需要在Photoshop中旋转它，因为在应用重启期间无法控制。

要测试它最好首先尝试关闭app缓存并使用charles代理或类似的东西限制带宽。

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

Answer 3

Apple在此主题的文档方面没有太多内容（参见this URL）。

有几点需要注意：

您提供的代码段假设您的图片位于http://yourdomain.com/splash.png
这仅适用于iPhone OS 3.0及更高版本
图片必须为PNG
仅在页面的DOM准备好之前显示图像

您还可以使用以下代码显式设置Web应用程序图标：

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

Answer 4

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

Answer 5

如果顶部有通知栏，iOS 4不会显示启动画面 - 例如使用个人热点时（网络共享）。

Answer 6

每次遇到这个问题时，几乎总是由于为同一页面调用多个启动画面或者不是320x460像素（确切）的启动画面。这应该可以解决问题：

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

但在调用启动画面之前，您还应该包含以下三行代码：

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

Answer 7

你是对的，这段代码必须在截面中，图像必须是320x460像素，之所以不起作用，图片必须是20KB或25KB或更小的小文件。我有同样的问题，但当我减少开始工作的文件。

欢呼声

iPhone网页启动画面无法正常工作

7 个答案: