我在一個項目上使用Twitter Bootstrap。除了默認的bootstrap樣式，我還添加了一些自己的樣式//My styles@media (max-width: 767px){ //CSS here}當視口的寬度小于767px時，我也使用jQuery來更改頁面上某些元素的順序。$(document).load($(window).bind("resize", checkPosition));function checkPosition(){ if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); }}我遇到的問題是$(window).width()由CSS計算的寬度和CSS計算的寬度似乎不相同。當$(window).width()返回767時，css將視口寬度計算為751，因此似乎有16px不同。有誰知道造成這種情況的原因以及如何解決問題？人們已經建議不考慮滾動條的寬度，使用$(window).innerWidth() < 751是要走的路。但理想情況下，我想找到一個計算滾動條寬度的解決方案，這與我的媒體查詢一致（例如，兩個條件都在檢查值767）。因為當然并非所有瀏覽器的滾動條寬度都是16px？
3 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
這可能是由于scrollbar，使用innerWidth而不是width像
if($(window).innerWidth() <= 751) {
$("#body-container .main-content").remove()
.insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove()
.insertAfter($("#body-container .left-sidebar"));
}
你也可以得到viewport類似的
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' ] };
}
以上代碼來源
添加回答
舉報
0/150
提交
取消