以响应式设计（css媒体查询）为目标的iphone4，好像较低的分辨率答案

【问题标题】：targeting iphone4 with responsive design (css media queries) as if lower res以响应式设计（css媒体查询）为目标的iphone4，好像较低的分辨率
【发布时间】：2012-07-06 03:49:42
【问题描述】：

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

我设计了一个响应式网站，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）

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

【问题讨论】：

标签： iphone css responsive-design media-queries

【解决方案1】：

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

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

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

您应该注意other bugs around landscape orientation。

另外，请记住，媒体查询有一个orientation parameter available：

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

【讨论】：

谢谢，确实正是我想要的。您可能想要更改的小错误：您声明“横向 640”，这应该是“横向 480”imo
我使用<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">。这是The Boston Globe 使用的。
我会将分号更改为逗号，这样它就不会在 Chrome 中引发错误。

【解决方案2】：

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

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

答案是您不能——retina 显示器 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;
  }
}

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

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

进一步阅读：

【讨论】：

谢谢，但不是我的意思。请参阅已接受的答案。你在横向/纵向混合上是对的，我正在解决这个问题。