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

我有一个登陆页面，其中CSS的结构是这样的：iPhone需要媒体查询的最小宽度：768px

body { 
    background: white; 
} 

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

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

在台式Safari和iPhone（一个真正的，实际的iPhone 6S设备上进行测试），身体背景为红色。无论我尝试应用什么（设备比率x2等），我都无法设置iPhone上的背景blue。

我错过了什么吗？

来源

2016-02-13 Jivan

原始的iPhone屏幕宽度（像素）是768px，即使iphone 6s仍然是从这个缩放。因此，设备比x2意味着屏幕上的全宽css元素为css像素中的screenwidth/2。

我们为什么要那样做？因为这意味着一个X厘米宽的屏幕在CSS中总是Y像素宽度。

我不知道在未来增加密度显示会发生什么。对于8k屏幕使用1080px css是没有意义的。也许命名将从px更改为更类似于android应用程序中的dp。

来源

2016-02-13 18:54:05 seahorsepip

我终于找到了我不得不在<head>补充一点：

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

现在一切工作正常。

来源

2016-02-13 19:11:55 Jivan

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

回答

相关问题