CSS媒體屏幕寬度與jQuery（窗口）.width（）

我正在製作一些漂亮的CSS3動畫，由一些jquery輔助，並在使這些動畫函數響應的過程中，我偶然發現了一件奇怪的事情，確實很奇怪。CSS媒體屏幕寬度與jQuery（窗口）.width（）

媒體查詢，我呼籲國家

@media screen and (max-width: 1024px)

但是當我打電話使用JavaScript窗口寬度也表明，它實際上是在窗口寬度觸發1009px

console.log('window.size: '+$(document).width());

我必須承認，我完全被這個混淆，任何人都有什麼好主意？ :)

來源

2014-04-30 Reborn

你的瀏覽器窗口右側有滾動條嗎？這可能會考慮到媒體查詢，但不是js – Pete

ahhh滾動條！我想你的東西:) – Reborn

@RenéHaugeReinholdt你可能想使用'$（窗口）。寬（）' –

@Pete指着我後在正確的方向和通過的代碼，我在什麼地方找到一個小PICE ispired，我想出了這個：

（我想給學分誰與上前的人下面，如果我能記得在那裏我發現了它，但如果有人在這裏張貼需要一個類似的解決方案）

function scrollBarWidth() { 
    jQuery("html").css("overflow", 'hidden'); 
    var width = jQuery("html").width(); 
    jQuery("html").css("overflow", 'scroll'); 
    width -= jQuery("html").width(); 
    if(!width){ 
     width = document.body.offsetWidth - document.body.clientWidth; 
     jQuery("body").css("overflow", ''); 
    } 
    return width; 
}

來源

2014-05-01 08:27:06 Reborn

我也有同樣的問題，我相信這是值得做的jQuery的解決方案我已經發現可能重量更輕一點整個功能，就是用

window.innerWidth

而不是使用jQuery來選擇主體/窗口寬度。

這裏是它不使用

$(window).resize(function() { 
    console.log(window.innerWidth); 
});

jQuery選擇 http://jsfiddle.net/wf40d79x/

工作小提琴，這裏是它打破，使用 jQuery選擇 http://jsfiddle.net/4bgzf1Lp/2/

$(window).resize(function() { console.log($(window).width()); });

當控制檯將屏幕降至600px時，媒體查詢會彈出，只使用javascript控制檯將同意寬度，而使用jQuery則會減小約17px。

希望這會有所幫助。

來源

2015-05-29 11:54:10

CSS媒體屏幕寬度與jQuery（窗口）.width（）

回答

相關問題