iPhone需要最小宽度的媒体查询:768px

时间:2016-02-13 18:17:14

标签: css responsive-design media-queries

我有一个着陆页,其中css的结构如下:

body {
    background: white;
}

@media (min-width: 768px) {
    body {
        background: red;
    }
}

@media (max-width: 767px) {
    body {
        background: blue;
    }
}

在桌面Safari和iPhone上(在真实的iPhone 6S设备上测试),正文背景为红色。无论我尝试应用什么(设备比率x2等),我都无法在iPhone上设置背景blue

我错过了什么吗?

2 个答案:

答案 0 :(得分:0)

原始iphone屏幕宽度(以像素为单位)为768px,即使iphone 6s仍然可以缩放。因此设备比率x2意味着屏幕上的全宽度css元素是cbs像素的screenwidth / 2。

为什么我们这样做?因为这意味着X cm宽度的屏幕在css中总是Y像素宽度。

我不知道未来密度显示会增加会发生什么。对于8k屏幕使用1080px css是没有意义的。也许这个命名会从px变成像Android应用程序上的dp更通用的东西。

答案 1 :(得分:0)

我终于发现我必须在<head>中添加它:

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

现在一切正常。