iphone - 以响应式设计(css 媒体查询)为目标的 iphone4 就像低分辨率一样

Question

这个问题之前肯定有人回答过，但是我找不到相关的问题。

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

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

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

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

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

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