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

【问题标题】：iPhone web splash screen not workingiPhone 网页启动画面无法正常工作
【发布时间】：2009-10-29 19:17:19
【问题描述】：

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

我相信语法是这样的：

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

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

我似乎无法让它工作...有人对此有任何提示和技巧吗？

【问题讨论】：

标签： iphone

【解决方案1】：

确保它是 320x460 像素。

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

【讨论】：

【解决方案2】：

您只能设置一个启动画面，否则会失败。为了选择 ipad 或 iphone 启动屏幕，您需要一点 javascript。

可用于原生应用的 ipad 横向启动画面不适用于网络应用。 iphone4 的视网膜闪屏也不会。您只能选择 ipad 或 iphone 尺寸的飞溅。在链接元素上设置 size 属性似乎适用于 ipad。但是拥有多个初始图像链接元素会使 iphone 失败。

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

要进行测试，最好先关闭应用缓存并使用 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" />

【讨论】：

我得到了这个脚本，但 iPad 上的启动画面似乎存在错误。如果我第一次以横向方式启动 Web 应用程序，则不会显示任何启动画面。如果我第一次以纵向启动，则启动画面可以工作，但风景永远不会工作。看来我不是唯一一个遇到这个问题的人，请在苹果论坛上查看这个帖子：discussions.apple.com/thread/3316892?start=0&tstart=0 任何人都可以确认他们已经成功地在 iPad HTML5 网络应用程序上创建并显示了横向和纵向启动屏幕吗？

【解决方案3】：

Apple 没有太多关于此主题的文档（请参阅this URL）。

有几点需要注意：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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" />

【讨论】：

【解决方案7】：

你是对的，这段代码必须是分段的，并且图像必须是 320x460 像素，它不工作的原因是图片必须是一个像 20KB 或 25KB 或更小的小文件。我有同样的问题，但是当我减少开始工作的文件时。

干杯

【讨论】：