以响应性设计（css媒体查询）为目标的iphone4，其分辨率似乎更低

这个问题以前肯定已经回答过了，但我找不到相关的问题

我设计了一个快速响应的网站，css媒体查询可以在320宽的屏幕上正确显示

我希望iPhone4（640 x 960）在纵向模式（640宽）下，能够像显示宽度=320像素那样坚持媒体查询。理由：尽管iphone有更多像素，但我确实希望向这些用户显示一个简化的布局，类似于非高密度手机的用户

有没有办法做到这一点，比如为这些高像素密度的手机指定一些元标签

当然，我可以用

min device pixel ratio:2

为iPhone4等定义单独的媒体查询，但这会导致单独的css媒体查询（一个用于低像素密度，一个用于高像素密度），它们基本上具有相同的逻辑，这对我来说似乎不是很枯燥（）

奇怪的是：新的iPad3，像素密度2，并没有正确地呈现我想要的方式，也就是说：它模仿（至少就css媒体查询而言）分辨率只有一半的设备

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

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

---

第一：我认为你的问题有一个输入错误——在640x960显示器上，640宽是portait模式，而不是横向模式。肖像是垂直的，风景是水平的

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

答案是你不能——视网膜显示器iphone和非视网膜显示器向浏览器报告它们自己为320x240。正如您所指出的，不同之处在于视网膜显示器的像素密度为2倍，您可以通过媒体查询将其作为目标：

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

.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;
  }
}

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

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

进一步阅读：

---

谢谢，这正是我想要的。您可能希望更改的小错误：您声明“640处于横向”，这应该是“480处于横向”，imoI use

。这就是它的用途。我会将分号改为逗号，这样它就不会在Chrome中抛出错误。谢谢，但这并不完全是我的意思。见公认的答案。你对风景画/肖像画的理解是对的，我正在修正。