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

前端之家收集整理的这篇文章主要介绍了针对具有响应设计(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.f2er.com/css/214686.html

猜你在找的CSS相关文章