2

我的网站使用 iOS Web App 元信息时遇到问题。我已经能够让它适用于所有设备，除了横向的 Retina iPad。由于我无法理解的原因，它只在左下角显示启动图像，就像它使用非 Retina 图像一样，但我不知道为什么。它适用于纵向。

这是我正在使用的代码：

    <!-- Do NOT use width=device width because it will letterbox viewport on iPhone 5... thanks for making it easy Apple. -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">

    <!-- iPhone 4 Retina -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/iphone4.jpg">
    <!-- iPhone 5 Retina -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/iphone5.jpg">

    <!-- iPad Retina Portrait -->
    <link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/ipadretinaport.jpg">
    <!-- iPad Retina Landscape -->
    <link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/ipadretina.jpg">        

    <!-- iPad Non-Retina Portrait -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="http://www.reckless-intent.com/assets/images/ios/ipadport.jpg">
    <!-- iPad Non-Retina Landscape -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="http://www.reckless-intent.com/assets/images/ios/ipad.jpg">

如果您希望自己运行该网站，请访问 www.reckless-intent.com。我已经尝试清除我的缓存和 cookie。我没有另一台 iPad，我可以在上面测试它是否被隔离。

非常感谢您的宝贵时间，我真的很感激 :)

Retina iPad 上的错误图像

4

1 回答 1

4

正如用户 Markus 在上面的评论线程中所说，我的问题的解决方案是视口，它应该是 768 像素而不是 1536 像素。

下面的代码现在可以在 iPhone 4、5 以及 iPad 和 iPad Retina 上完美运行。

    <!-- iPhone 4 Retina -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/iphone4.jpg">

    <!-- iPhone 5 Retina -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/iphone5.jpg">

    <!-- iPad (portrait) -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="http://www.reckless-intent.com/assets/images/ios/ipad.jpg">

    <!-- iPad (landscape) -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="http://www.reckless-intent.com/assets/images/ios/ipadport.jpg">

    <!-- iPad (Retina, portrait) -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/ipadretinaport.jpg">

    <!-- iPad (Retina, landscape) -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="http://www.reckless-intent.com/assets/images/ios/ipadretina.jpg">
于 2013-06-24T16:57:55.407 回答