媒体查询不被读取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
}