iPad Web App 启动画面在横向模式下不起作用

Question

我已经阅读了无数关于此的主题、博客文章和其他在线文档，但我无法让它发挥作用。我花了几个小时研究这个并尝试不同的东西。

我正在尝试为 iPad 2 上的网络应用程序显示初始屏幕图像。我什至不关心 iPad 3 的分辨率。

这些是我拥有的标签：

<link href="images/splash_748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup_image">
<link href="images/splash_768.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image">

splash_748.png 为 748x1024

splash_768.png 为 768x1004

纵向模式启动画面效果很好。横向版本不会显示。有没有人有任何想法？我已经尝试了十几种不同的方法来做到这一点。他们都没有工作。

每次进行更新时，我都会删除应用程序并清除 Safari 的缓存。然后我返回网页并将其发送到主屏幕。这似乎会发现图像中的变化，所以我无法想象它正在缓存其他任何东西。

Answer 1

这就是我的做法：

<link rel="apple-touch-startup-image" sizes="1024x748" href="Default-Landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

Answer 2

您的代码有错误。看第一行的结尾

rel="apple-touch-startup_image"

应该是

rel="apple-touch-startup-image"

注意 _ 应该是 -

编辑：这是我的 iOS 网络应用程序代码 - 涵盖了大多数可能性，并且似乎适用于大多数设备，但不要让我坚持 :)

<!-- iOS Device Startup Images -->
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="images/ios/iphone-startup-320-460.png" media="screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1)" />

<!-- iPhone/iPod Touch (high-resolution) Portrait – 640 x 920 pixels -->
<link rel="apple-touch-startup-image" href="images/ios/iphone-startup-640-920.png" media="screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/ios/ipad-startup-1024-748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1)" />

<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/ios/ipad-startup-768-1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1)"/>

<!-- iPad (high-resolution Landscape – 2048 x 1496 pixels ) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="images/ios/ipad-startup-2048-1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- iPad (high-resolution) Portrait – 1536 x 2008 pixels -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/ios/ipad-startup-1536-2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- iOS Icons -->
<link rel="apple-touch-icon" href="images/ios/icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/ios/icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/ios/icon-144.png" />