jQuery和CSS媒體查詢之間的窗口寬度不一致

我在這裏得到了一些奇怪的結果，我不太明白。jQuery和CSS媒體查詢之間的窗口寬度不一致

在jQuery中，我通過登錄窗口寬度：

console.log($(window).width());

在我的CSS，我改變背景顏色爲紅色：

@media only screen and (min-width: 768px) { 

    body { background: red!important; } 

}

然而，在Firebug，控制檯說，窗口寬度是756px寬，但CSS會使背景變爲紅色，直到它達到768px的最小寬度纔會發生。

見進一步澄清這個截屏：

enter image description here

爲什麼背景是紅色的，而且CSS似乎不正確誰能給我解釋一下？這是jQuery實際上是不正確的？

另外，它會和垂直滾動條有什麼關係嗎？

來源

2014-04-23 Michael Giovanni Pumo

您需要檢查的viewport的width像，

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
}

Viewport Source

或者你可以使用innerWidth()一樣，

if($(window).innerWidth() <= 751) { 
    $("body").css('background','red !important'); // background red 
} else { 
    $("body").removeAttr('style'); // remove style attribute 
}

您可以使用matchmedia，如果你不關心EGS約IE，

function checkPosition() { 
    if (window.matchMedia('(max-width: 767px)').matches) { 
     //... 
    } else { 
     //... 
    } 
}

對於所有瀏覽器，你可以嘗試

if (Modernizr.mq('(max-width: 767px)')) { 
    //... 
} else { 
    //... 
}

請參閱modernizr mq

來源

2014-04-23 12:14:41

完整的文章，不錯的！ –

@ A.Wolff謝謝.. –

我對你最後使用Modernizr的建議進行了討論，因爲其他人覺得有點不好意思，我希望跨瀏覽器獲得一致的結果。謝謝。它現在按預期工作。看來$（window）.width（）不佔用滾動條。 –

不同之處在於滾動條的寬度。

console.log($(window).width());

返回視口區域的寬度（WIDTHOUT的srcoll巴），而媒體查詢包括所述滾動條。

滾動條寬度因瀏覽器而異。
例如，在Chrome中，背景顏色變化顯示爲747px，您可以在其他瀏覽器中嘗試使用此fiddle以查看差異。

來源

2014-04-23 11:53:27

http://stackoverflow.com/questions/8794338/how-to-get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using –

感謝您的澄清，但請你有一個建議的修復？ –

你可以強制一個滾動條（這用於規範化css）html {overflow-y：scroll;}那麼你的寬度應該更加一致。 – lharby

//返回瀏覽器視口的寬度
$（window）.width（）;

//返回HTML文檔的寬度
$（document）.width（）;

Css將採用HTML文檔寬度。通過這個鏈接https://api.jquery.com/width/

來源

2014-04-23 11:59:50 sreenath

您應按照跨瀏覽器解決方案媒體查詢檢查窗口寬度是這樣的：

var isWindowWidthMatchingQuery = window.matchMedia("only screen and (min-width: 768px)").matches; 

alert(isWindowWidthMatchingQuery); // returns true or false

見支持表：http://caniuse.com/#search=matchMedia

來源

2014-04-23 12:07:00

請勿使用JavaScript檢查視口寬度。這是不必要的複雜，容易出現不一致。相反，只需檢查@media -query依賴CSS屬性，即類.navbar撥動的檢查導航欄斷點使用可摺疊的引導時，（由少變@屏手機集）導航欄：

f($(".navbar-toggle").css("display") != "none") { 
    alert("Yay! I'm consistent with bootstrap!"); 
}

如果你想檢查@屏幕平板和@屏幕桌面斷點，你可以檢查.container類的在你的引導寬度，或任何其它CSS選擇器.css取決於合適的@media-查詢。當然你也可以用你自己的CSS來使用這種技術。

來源

2015-12-18 14:21:14 timar

jQuery和CSS媒體查詢之間的窗口寬度不一致

回答

相關問題