【问题标题】:Issue with iOS Web App Splash ScreeniOS Web 应用程序启动画面的问题
【发布时间】:2013-06-21 00:06:34
【问题描述】:

我的网站使用 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 可以测试它是否被隔离。

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

【问题讨论】:

  • That's 第一次打开页面时的样子。我没有看到启动画面...
  • 竖屏模式你试过了吗?
  • Same result ... 没有启动画面 ... 抱歉 ;(
  • 是的,真的很奇怪。
  • 我不确定视网膜 ipad 的视口是否与普通 ipad 不同。话虽如此,请尝试使用 768px 而不是 1536。

标签: html ios


【解决方案1】:

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

下面的代码现在可以在 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">

【讨论】:

  • 愚蠢的问题,但这适用于在 Safari iOS 中显示的常规网站吗?
  • 不,它不适用于任何浏览器。这仅适用于添加到 iO 上的主屏幕的 Web 应用
  • 对不起,我从来没有看到你的第一条评论。上述方法仅适用于 iOS,但您可以为 Windows 8 和 Windows Phone 磁贴添加其他属性。这是Windows Phone 的方法:blogs.windows.com/windows_phone/b/wpdev/archive/2012/10/19/… 我相信Windows 8 的方法是类似的。最好在 SO 或 MSDN 上查找 :) 希望对您有所帮助!
猜你喜欢
  • 2013-01-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-09
  • 2018-05-26
  • 1970-01-01
相关资源
最近更新 更多