iPhone网络应用程序启动画面

Question

我正在开发一款 iPhone 网页应用程序，使用了“apple-mobile-web-app-capable”元标签来实现“全屏模式”。当我启动应用程序时，它会显示上次离开时的页面截图，同时加载页面。这看起来像是应用程序已准备好接收输入，但实际上并没有，这很令人困惑。

有没有可能改变默认行为，直到应用程序准备好接收输入前，显示一个空白屏幕？

- Bjarte Minde

Answer 1

这将为您的Web应用程序添加一个启动画面。以下是iPad（包括Retina和非Retina）、iPhone / iPod Touch（包括Retina和非Retina）和iPhone 5所需的尺寸，这些都包括状态栏区域。 苹果文档-启动画面，苹果文档-图标和图片尺寸

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

如果要为 iPad 兼容性创建 Web 应用程序，建议同时使用横向和纵向尺寸。

- adamdehaven

---

谢谢。每张图片的分辨率是多少？ - tsdexter

请查看此处：http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html - adamdehaven

iPhone为什么需要480像素的启动图像高度，当状态栏会占用20像素？这样启动图像不会偏离中心吗？ - Crashalot

这个答案不起作用。至少对于iPhone 4，我们必须将图像大小设置为320x460。 - Crashalot

这是有效的。如果您正在使用高度为460的图像，则不符合苹果的标准。您没有正确阅读答案。图像尺寸在苹果的文档中有概述，并在我上面的评论中引用。此答案显示所需的媒体查询-而不是图像大小。 - adamdehaven

Answer 2

必须是320x460，如果是320x480则不起作用。

- AlBeebe

Answer 3

将此代码放在 HEAD 标签之间：

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

你使用的图片必须是分辨率为320x460的JPG或PNG格式。

- DVO

---

必须是PNG格式，尺寸为320x460而非320x480。 - AlBeebe

实际上，JPEG 格式可以使用。文档曾经说过只支持 PNG 格式，但现在已不再是这样了。参考资料：https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - Darwin

这已经不再是最新的了 - 请看我的回答。 - adamdehaven

Answer 4

图片必须为PNG格式，尺寸为320x460，仅在iPhone OS 3.0或更高版本下才能正常工作。

- Pascal B.

---

有没有一种方法可以在安卓上实现这个？ - creativeedg10