Firefox，Windows DPI縮放和CSS最大寬度媒體查詢

Question

我有一個網站，媒體查詢根據瀏覽器寬度決定是否顯示右欄。 CSS看起來像這樣：

@media only screen and (max-width: 1152px) { 
    #column_right {display:none} 
} 

最近，我在一個Windows盒子裏測試了DPI縮放設置爲125％。顯示器的分辨率設置爲1024x768。所以理論上，因爲只有1024個可用的CSS像素，所以我認爲這將匹配媒體查詢。

但是，這不是發生的行爲！看起來媒體查詢看起來不是CSS像素，而是設備像素，其中有1280（1024 x 125％）。這僅在Firefox中發生，因爲Firefox使用Windows設置的設備像素比例，而所有其他瀏覽器（包括奇怪的是Internet Explorer）都使用1.0的默認設備像素比例。我說這是IE的奇怪，因爲如果有一個瀏覽器應該尊重Windows設置，那就是IE。

無論如何，爲什麼這樣，我將如何解決它？

Answer 1

如果屏幕分辨率低於某個寬度，您可以使用max-device-width來隱藏列。

如果屏幕分辨率高達1024像素寬，下面的示例將觸發display: none媒體查詢。超過1024像素會得到一個綠色的div。

div { 
 
    background: #F00; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
@media screen and (max-device-width: 1024px) { 
 
    div { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (min-device-width: 1024px) { 
 
    div { 
 
    background: green; 
 
    } 
 
}

<div></div>