CSS媒體查詢和Firefox的滾動條的寬度

可能重複：
issue with CSS media queries(scrollbar)CSS媒體查詢和Firefox的滾動條的寬度

所以，火狐包括在其窗口寬度計算，在那裏有Webkit的沒有滾動條的寬度。這會導致瀏覽器之間的不一致。

現在，我知道技術上Firefox是通過計算滾動條作爲窗口寬度的一部分來遵循規範的，但是這對我來說似乎非常違反直覺。畢竟，移動設備沒有滾動條，滾動條寬度因瀏覽器/瀏覽器/操作系統而不同。

有什麼我可以做的，以防止Firefox包括滾動條寬度？也許是一個jQuery，將允許我的媒體查詢跨瀏覽器正確觸發？

謝謝。

2012-07-04 beefchimi

如果您只是使用媒體查詢，那麼側邊欄的偏移量不會在瀏覽器之間產生任何差異。

但是，如果您嘗試將jQuery與媒體查詢結合使用，則可能會遇到一些小問題，因爲jQuery中返回的寬度是一致的，然後會顯示偏移量。

要解決這個問題，您只需計算Firefox瀏覽器側邊欄的偏移量，然後從您希望同步的任何點中減去該偏移量即可。即

var scrollBarWidth = 0; 
if ($.browser.mozilla) 
    scrollBarWidth = window.innerWidth - jQuery("body").width();

再後來就在您指定的同步...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) { 
    //act to do along with the media query 
}

希望這是有幫助的

2012-08-01 23:13:39

我想提一提，它並有所作爲，因爲如果你想隱藏一個介於400px - 768px之間的元素，直到您達到385px - 753px的範圍時，它纔會起作用。如果您在最大寬度768的基礎上創建任何寬度百分比，那麼15px也會失敗。所以我會說它有所作爲。 – pjdicke

回答