轉載阿訊小飛 https://www.cnblogs.com/iflygofy/p/5209725.html 關於JavaScript獲取瀏覽器高度和寬度值
JavaScript獲取瀏覽器高度和寬度值
IE中：
document.body.clientWidth ==> *DY物件寬度
document.body.clientHeight ==> *DY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中：
document.body.clientWidth ==> *DY物件寬度
document.body.clientHeight ==> *DY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面物件寬度（即*DY物件寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面物件高度（即*DY物件高度加上Margin高）
沒有定義W3C的標準，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面物件寬度（即*DY物件寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面物件高度（即*DY物件高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面物件寬度（即*DY物件寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面物件高度（即*DY物件高度加上Margin高）
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
螢幕解析度的高： window.screen.height
螢幕解析度的寬： window.screen.width
螢幕可用工作區高度： window.screen.availHeight
螢幕可用工作區寬度： window.screen.availWidth
HTML精確定位：scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollWidth ==> 獲取物件的滾動寬度
scrollHeight ==> 獲取物件的滾動高度
scrollLeft ==> 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離（被捲去的左）
scrollTop ==> 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離（被捲去的高）
offsetLeft ==> 獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop ==> 獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
offsetHeight ==> 獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
event.clientX ==> 相對文件的水平座標
event.clientY ==> 相對文件的垂直座標
event.offsetX ==> 相對容器的水平座標
event.offsetY ==> 相對容器的垂直座標
document.documentElement.scrollTop ==> 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop ==> 相對文件的水平座標+垂直方向滾動的量
Jquery
alert($(window).height()); //瀏覽器當前視窗可視區域高度
alert($(document).height()); //瀏覽器當前視窗文件的高度
alert($(document.body).height()); //瀏覽器當前視窗文件body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當前視窗文件body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前視窗可視區域寬度
alert($(document).width()); //瀏覽器當前視窗文件物件寬度
alert($(document.body).width()); //瀏覽器當前視窗文件body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當前視窗文件body的總寬度 包括border padding margin
實現程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>請調整瀏覽器視窗</title>
</head>
<body>
<h2 align="center">請調整瀏覽器視窗大小</h2><hr/>
<p>1920*1200 </p>
<p>ie:55+24=79 1081 40</p>
<p>火狐：23+71+26=120 1040 40</p>
<p>谷歌：61 1099 40</p>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器視窗的實際尺寸-->
瀏覽器視窗 的 實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器視窗 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
var winWidth = 0;
var winHeight = 0;
//函式：獲取尺寸
function findDimensions() {
//獲取視窗寬度
if (window.innerWidth) {
winWidth = window.innerWidth;
} else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth;
}
//獲取視窗高度
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通過深入Document內部對body進行檢測，獲取視窗大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文字框
document.form1.availHeight.value = winHeight;
document.form1.availWidth.value = winWidth;
}
findDimensions();
//呼叫函式，獲取數值
window.onresize = findDimensions;
</script>
</body>
</html>
HTML 測試程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試1</title>
<style type="text/css">
/* reset */
body, label,p{margin:0; padding:0;}
body{font:12px/1.0 Arial, "宋體"; color:#333;}
p{
white-space: normal;
word-break: break-all;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
function show(){
var s = "";
s += "網頁可見區域寬度clientWidth："+document.body.clientWidth;
s += "\n網頁可見區域高度clientHeight："+document.body.clientHeight;
s += "\n網頁可見區域寬(body)，包括border等（包括邊線）offsetWidth："+document.body.offsetWidth;
s += "\n網頁可見區域高(body)，包括border等（包括邊線）offsetHeight："+document.body.offsetHeight;
s += "\n網頁正文全文寬，包括有滾動條時的未見區域scrollWidth："+document.body.scrollWidth;
s += "\n網頁正文全文高，包括有滾動條時的未見區域scrollHeight："+document.body.scrollHeight;
s += "\n網頁被捲去的Top(滾動條)scrollTop："+document.body.scrollTop;
s += "\n網頁被捲去的Left(滾動條)scrollLeft："+document.body.scrollLeft;
s += "\n瀏覽器距離Top（screenTop）："+window.screenTop;
s += "\n瀏覽器距離Left（screenLeft）："+window.screenLeft;
s += "\n螢幕可用工作區域寬度screen.availWidth："+window.screen.availWidth;
s += "\n螢幕可用工作區域高度screen.availHeight："+window.screen.availHeight;
s += "\n螢幕解析度寬度screen.width："+window.screen.width;
s += "\n螢幕解析度高度screen.height："+window.screen.height;
alert(s);
}
</script>
</head>
<body style="margin:5px;padding:10px;border:15px solid #f00;">
<label>margin:5px; padding:10px; border:15px solid #f00;</label>
<p>w:-(5+15+15+5+17=57) h:15*2+20*2+10*2+10*2+12*2=134</p>
<div style="width:2000px;height:1500px;margin:10px;padding:15px;border:20px solid #ddd;">
<p>width:2000px; height:1500px; margin:10px; padding:15px; border:20px solid #ddd;</p>
<a onclick="show()" href="#">點選</a>
</div>
</body>
</html>