在移动调试视图中未在Chrome中读取媒体查询

Question

我在使用Chrome浏览器时遇到了非常奇怪的行为。 在移动调试视图中时，它不会接收某些大小的媒体查询。

例如，以下在移动视图中起作用：

  @media screen and (max-width: 980px) {
    #cliff {
      background-color: red; } 
    }

但这不起作用

  @media screen and (max-width: 979px) {
    #cliff {
      background-color: red; } 
    }

您会看到差异只有一个像素。 然后，如果我退出移动调试视图并更改屏幕尺寸，它将起作用。 任何人都可以建议或知道发生这种情况的任何原因吗？

Answer 1

标头中有这个吗？

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

此外，也许更改格式会有所帮助。 这对我有用：

@media (max-width:980px){
     //Styles
}