iPad3 Web 应用程序启动画面在横向模式下不起作用

Question

我为 iPad 构建了一个 HTML5 网络应用程序，它使用初始屏幕来实现横向和纵向模式。 我使用下面的链接标签让它工作。

<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="{{MEDIA_URL}}ipad/img/Default-Landscape.png" rel="apple-touch-startup-image"/>
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="{{MEDIA_URL}}ipad/img/Default-Portrait.png" rel="apple-touch-startup-image"/>

图像在 iPad1 和 2 上运行良好，但在 iPad3 上，横向模式下的启动画面显得不合适，纵向模式工作正常。我必须为横向模式使用不同的图像还是必须更改链接标签？

Answer 1

高分辨率 iPad 启动图像的大小（以像素为单位）：
1536 x 2008（纵向）
2048 x 1496（横向）
来源：apple

将此添加到您的媒体查询中：
和 (-webkit-min-device-pixel-ratio: 2) 以针对新 iPad，例如：

<link rel="apple-touch-startup-image" href="img/ipad-landscape-retina.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />