10

之前一定已经回答过了，但我找不到相关的问题。

我设计了一个响应式网站，css 媒体查询一直向下正确显示在 320 宽上。

我想要的是 iPhone4 (640 x 960) 在纵向模式（640 宽）下遵守媒体查询，就好像它的 display-width = 320 像素一样。理由：尽管 iphone 有更多像素，但我确实想向那些用户显示一个简化的布局，类似于非高密度手机的用户。

有什么方法可以做到这一点，例如为这些高像素密度手机指定一些元标记？

当然，我可以为 iphone 4 等定义单独的媒体查询，min-device-pixel-ratio: 2但这会导致单独的 css 媒体查询（一个用于低像素密度，一个用于高像素密度），它们基本上具有相同的逻辑，这似乎不是很干燥对我来说（http://en.wikipedia.org/wiki/Don%27t_repeat_yourself）

奇怪的是：像素密度为 2 的新 Ipad 3 可以正确呈现我想要的方式，即：它模仿（至少就 css 媒体查询而言）分辨率只有一半的设备。

4

2 回答 2

15

iPhone 4（和 4S）将响应此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是您所追求的“初始规模”部分。它将使高分辨率设备表现得像 320 像素宽（或横向 480 像素）。

您应该注意横向方向的其他错误。

另外，请记住，媒体查询有一个方向参数可用：

@media screen and (orientation:landscape) {
/* Landscape styles */
}
于 2012-07-05T17:57:14.107 回答
2

首先：我认为您的问题中有一个错字——在 640x960 显示器上，640 宽是纵向模式，而不是横向模式。纵向是纵向的，横向是横向的。

也就是说，如果我没看错你的问题，那么你是在问如何使用媒体查询来定位视网膜显示屏 iPhone 的宽度。

答案是你不能——retina display iphone 和 non-retina display 都向浏览器报告自己为 320x240。正如您所指出的，不同之处在于视网膜显示器具有 2 倍像素密度，您可以使用媒体查询来定位：

.avatar {
    display: block;
    width: 50px;
    height: 50px;
    background: url("50x50-avatar.png");
}
@media only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  .avatar {
    background: url("100x100-avatar.png");
    background-size: 50px 50px;
  }
}

此示例用于在视网膜显示器上显示高分辨率图像，但您可以使用相同的技术来调整视网膜显示器的布局。

因此，简而言之，首先为非视网膜显示器编写样式，然后使用媒体查询添加视网膜显示器覆盖，这应该可以避免您的 DRY 问题。

进一步阅读：

于 2012-07-05T18:14:44.053 回答