@media max-width 與jquery寬度取值的差異

最近寫了個響應式網站，有些效果通過用jq的$(window).width()來判斷屏幕寬度，當屏幕寬度小於1366時一些參數發生變化。@media中也有小於1366的判斷條件，但是用起來的時候發現一個小BUG，當屏幕縮小到1367~1382的時候JS已經觸發，但是@media卻沒到觸發條件，所以頁面在這個尺寸有一點變形。后來發現是因為$(window).width()獲取屏幕寬度時並沒有獲取滾動條寬度，@media是滾動條一起計算的。

所以當需要js判斷屏幕寬度並且配合@media時應使用window.innerWidth來獲取寬度，這樣才能與@media同步。

 

 

知識擴展

Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度

Javascript:

 

document.body.clientWidth;        //網頁可見區域寬(body)

document.body.clientHeight;       //網頁可見區域高(body)

document.body.offsetWidth;       //網頁可見區域寬(body)，包括border、margin等

document.body.offsetHeight;      //網頁可見區域寬(body)，包括border、margin等

document.body.scrollWidth;        //網頁正文全文寬，包括有滾動條時的未見區域

document.body.scrollHeight;       //網頁正文全文高，包括有滾動條時的未見區域

document.body.scrollTop;           //網頁被卷去的Top(滾動條)

document.body.scrollLeft;           //網頁被卷去的Left(滾動條)

window.screenTop;                     //瀏覽器距離Top

window.screenLeft;                     //瀏覽器距離Left

window.screen.height;                //屏幕分辨率的高

window.screen.width;                 //屏幕分辨率的寬

window.screen.availHeight;          //屏幕可用工作區的高

window.screen.availWidth;           //屏幕可用工作區的寬

 

　　

 

Jquery:

 

$(window).height();                           //瀏覽器當前窗口可視區域高度

$(document).height();                        //瀏覽器當前窗口文檔的高度

$(document.body).height();                //瀏覽器當前窗口文檔body的高度

$(document.body).outerHeight(true);  //瀏覽器當前窗口文檔body的總高度 包括border padding margin

$(window).width();                            //瀏覽器當前窗口可視區域寬度

$(document).width();                        //瀏覽器當前窗口文檔對象寬度

$(document.body).width();                //瀏覽器當前窗口文檔body的寬度

$(document.body).outerWidth(true);  //瀏覽器當前窗口文檔body的總寬度 包括border padding margin