针对具有响应设计(css媒体查询)的iphone4,就好像更低的分辨率

这一定已经被回答过了,但我找不到相关的问题.

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

奇怪的是：新的Ipad 3,具有像素密度2,DOES正确渲染我想要的方式,即：它模拟(至少像css媒体查询)一个具有一半分辨率的设备.

解决方法

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

原文地址：https://www.jb51.cc/css/214686.html