媒体查询只能在Firefox上运行，而不能在Chrome上运行

Question

我想为屏幕大小介于1024像素至1280像素之间的样式添加一些样式，因此我在使用以下媒体查询：

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

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

为什么1280px屏幕上的Chrome仍显示上述媒体查询中添加的样式？ 我也该如何解决上述针对Chrome的查询？ 谢谢。

Answer 1

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

强制性JSFiddle 在这里

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

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

Answer 2

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

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

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

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

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