Media Query适用于Firefox，但不适用于Chrome

Question

我想为1024px到1280px之间的屏幕尺寸添加一些样式，所以我正在使用以下媒体查询：

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

我的屏幕尺寸为1280像素。 Firefox不显示上述查询中添加的任何样式（这是正确的），但Chrome浏览器在1280px屏幕尺寸上显示上述媒体查询中添加的样式。

为什么1280px屏幕上的Chrome仍会显示上述媒体查询中添加的样式？如何修复Chrome的上述查询呢？ 感谢。

Answer 1

我真的不确定您为什么会遇到媒体查询问题。也许你没有正确设计它。

强制性的JSFiddle here

body { background: red; }  
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    body { background: blue; }
}                                                         

我已经在三种不同类型的屏幕上使用Google Chrome进行了测试：
1.宽度小于1024px
2.指定1024px和1279px之间的宽度
3.宽度超过1279px

Answer 2

那是6岁，但也许可以帮助某人：

我也遇到了同样的问题，媒体查询在edge和firefox中工作正常，但在chrome中却不能。

至少就我而言，问题是我没有将视口标签放在head / html中：

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

现在，为什么该网站在不知道的firefox / edge中工作，实际上使查找问题变得更加困难...