针对具有响应式设计（CSS媒体查询）的iPhone4，就好像更低分辨率

这一定是以前回答，但我找不到相关的问题。针对具有响应式设计（CSS媒体查询）的iPhone4，就好像更低分辨率

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

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

通过为这些高像素密度手机指定一些meta标签来实现这一点的任何方式，例如？

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

奇怪的是：新的Ipad 3，像素密度2，是否正确呈现我想要的方式，即：它模仿（至少与CSS媒体查询有关）具有一半分辨率的设备。

来源

2012-07-05 Geert-Jan

的iPhone 4（和4S）将本meta标签回应：

<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 */ 
}

来源

2012-07-05 17:57:14 chipcullen

谢谢，确实正是我一直在寻找。你可能想要改变的小错误：你在状态'640'，这应该是'480在横向'imo – 2012-07-05 18:05:46

你是对的 - 正在修复... – chipcullen 2012-07-05 18:55:18

我使用''。这就是[波士顿环球]（http://www.bostonglobe.com/）所使用的。 – 2012-11-05 03:58:55

第一：我觉得有一个在你的问题一个错字 - 一个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，就好像更低分辨率

回答

相关问题