html - iOS Web 应用程序启动画面的问题
<p><p>我的网站使用 iOS Web App 元信息时遇到问题。我已经能够让它适用于所有设备，除了横向的 Retina iPad。由于我无法理解的原因，它只在左下角显示启动图像，就像它使用非 Retina 图像一样，但我不知道为什么。它适用于纵向。</p>
<p>这是我正在使用的代码:</p>
<pre><code> <!-- 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">
</code></pre>
<p>如果您希望自己运行该网站，请访问 www.reckless-intent.com。我已经尝试清除我的缓存和 cookie。我没有其他 iPad 可以测试它是否被隔离。</p>
<p>非常感谢您的宝贵时间，我真的很感激 :)</p>
<p> <img src="/image/gZTtv.jpg" alt="Image of error on Retina iPad"/> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>正如用户 Markus 在上面的评论线程中所说，我的问题的解决方案是视口(viewport)，它应该是 768px 而不是 1536px。</p>
<p>下面的代码现在可以在 iPhone 4、5 以及 iPad 和 iPad Retina 上完美运行。</p>
<pre><code> <!-- 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">
</code></pre></p>
<p style="font-size: 20px;">关于html - iOS Web 应用程序启动画面的问题，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/17225814/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/17225814/
</a>
</p>
页:
[1]