Question

我为iPad构建了一个HTML5 webapp，它使用启动画面进行横向和纵向模式。我使用下面的链接标签来实现它。

<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)" />

iPad3网络应用程序启动画面无法在横向模式下工作

1 个答案: