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

Question

这必须在之前得到解答,但我找不到相关的问题.

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

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

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

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

奇怪的是:新的Ipad 3,像素密度为2,DOES正确呈现我想要的方式,即:它模仿(至少在css媒体查询方面)一个分辨率为一半的设备.

Answer 1

iPhone 4(和4S)将响应此元标记:

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

这是你所追求的"初始规模"部分.它将使高分辨率设备像320px宽(或横向480).

您应该注意到横向方向还有其他错误.

另外,请记住,媒体查询可以使用方向参数:

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