媒體查詢只能在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中工作，實際上使查找問題變得更加困難...