Question

之前必须已经回答过，但我找不到相关的问题。

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

我想要的是iPhone4（640 x 960）在纵向模式（640宽）时坚持媒体查询，就好像它的显示宽度= 320像素一样。理由：即使iphone有更多像素，我也希望向这些用户显示简化的布局，类似于非高密度手机的用户。

通过为这些高像素密度手机指定一些元标记，可以做任何方法吗？

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

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

Answer 1

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

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

这是你所追求的“初始规模”部分。这将使高分辨率设备的行为类似于320px宽（或横向480）。

您应该注意other bugs around landscape orientation。

另外，请注意媒体查询有orientation parameter available：

@media screen and (orientation:landscape) {
/* Landscape styles */
}

Answer 2

首先：我认为你的问题有一个错字 - 在640x960显示器上，640宽是移植模式，而不是风景。肖像是垂直的，风景是水平的。

那就是说，如果我正在读你的问题，你就会问如何使用媒体查询来定位视网膜显示器iphone。

答案是你不能 - 视网膜显示屏iphone和非视网膜显示屏都以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;
  }
}

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

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

进一步阅读：

使用响应式设计（css媒体查询）定位iphone4，就像降低分辨率一样

2 个答案: