网页应用程序的 iPhone 4 上没有出现加载屏幕

Question

当有人从 iPhone 加载我们的应用程序时，我们使用以下元标记来显示加载屏幕，但是当我们点击主屏幕图标时，只会出现一个白页。我们还需要做什么才能启用加载屏幕？

网站是www.tekiki.com。

<link rel='apple-touch-icon-precomposed' href='/images/dandy/dandy_57.png' />
<link rel='apple-touch-startup-image' media='(device-width: 480px)' href='/images/dandy/loading_screen.png'>    
<link rel='apple-touch-startup-image' media='(device-height: 568px)' href='/images/dandy/loading_screen_iphone5.png'>

Answer 1

我猜你还没有指定正确的尺寸。

您可以在 SO in this post 上找到标签列表

我不能测试这个正确的知道，但你可能只是谷歌apple-touch-startup-image 找到有用的帖子，如this one，可能需要结合其中的一些。

这看起来像是一个完整且非常新鲜的集合（来自http://www.miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/）

<!--iPhone and iPad Web App Startup Images -->

<!-- Do NOT use width=device width because it will letterbox viewport. -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- iPhone 3 and 4 Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-748x1024.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-2048x1496.png">`

Answer 2

查看移动设备 www.tekiki.com 的 html 源代码发现两个问题：

这是当前源代码的sn-p

<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='apple-touch-startup-image-320x460.png'>

<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x920.png'>

<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x1096.png'>

问题 1

对于 iPhone 4 和 iPhone 5 的链接元素，href 值不正确，需要在前面加上 '/images/dandy/'。

问题 2

device-width 在 iPhone 4 和 iPhone 5 上似乎无法正常工作。应该使用 max-device-width 而不是 device-width。

测试代码

这是我在 iPhone 4S 上工作的测试 html 代码（我没有测试任何其他 iPhone 型号）：

<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-320x460.png'>

<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width: 480px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x920.png'>

<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x1096.png'>

一篇您可能会觉得有用的优秀博文是：http://stuffandnonsense.co.uk/blog/about/home-screen-icons-and-startup-screens

编辑：

iPhone 4S 正在加载 320 像素的加载屏幕，而不是 640 像素的图片。所以我更新了 html 标记。