瀏覽器和媒體查詢中的不同分辨率

在CSS中我有：

@media(max-width: 1000px){ 
    body{ 
     background-color:red; 
    } 
}

，並在Firefox背景改變了1013px寬度，並在Chrome上1018px

$(window).width() jQuery中的Firefox是983px，979px鉻。

這是怎麼回事？我用bootstrap.css

謝謝！

2014-10-01 Ridd

它可能是滾動條大小之間的差異！不要忘了它，並根據需要使用數字！（即1000px將適用於所有瀏覽器） – 2014-10-01 20:52:58

您可能需要['window.innerWidth']（https://developer.mozilla.org/en-US/docs/Web/API/Window.innerWidth） – cvrebert 2014-10-01 21:42:13

這取決於瀏覽器如何處理涉及視口的滾動條。 Chrome和Safari（Webkit）不包含滾動條尺寸。 Firefox，Opera和IE包含滾動條尺寸。

的「寬度」媒體特徵描述了輸出設備的目標的顯示區域的寬度。對於連續媒體，這是視口的寬度（如CSS2 9.1.1節[CSS21]所述）包括渲染滾動條的大小（如果有）。對於分頁媒體，這是頁面框的寬度（如CSS2第13.2節[CSS21]所述）。

本質上，Webkit瀏覽器不正確地處理這個問題。

2014-10-01 21:02:39

回答