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>
原文：https://www.cnblogs.com/iflygofy/p/5209725.html
JavaScript獲取瀏覽器高度和寬度值