用jQuery監聽瀏覽器窗口的變化
$(window).resize(function(){
$(document.body).height(); // 瀏覽器窗口文檔body的高度
$(document.body).width(); // 瀏覽器窗口文檔body的寬度
$(document.body).outerHeight(); //瀏覽器窗口文檔的總高度,也就是盒子模型,包括height、padding、border和margin
$(document.body).outerWidth(); //瀏覽器窗口文檔的總寬度,也就是盒子模型,包括height、padding、border和margin
$(document).height(); // 瀏覽器窗口文檔的高度
$(document).width(); // 瀏覽器窗口文檔的寬度
$(window).height(); //瀏覽器窗口可視區域的高度
$(window).width(); //瀏覽器窗口可視區域的寬度
})
用js獲取瀏覽器的各個區域的大小--常用的
document.body.clientWidth; // 網頁可見區域寬
document.body.clientHeight; //網頁可見區域高
document.body.offsetWidth; //網頁可見區域高,包括邊線的寬
document.body.offsetHeight; //網頁可見區域高,包括邊線的高
以上不考慮瀏覽器兼容性,都可以用:
window.innerHeight/innerWidth來獲取
document.body.scrollTop; // 鼠標滾動可見區域里丟失的網頁上半部分
document.body.scrollLeft; //鼠標滾動可見區域里丟失的網頁左半部分