Summary of methods for obtaining web page width and height using javascript_javascript skills

document.body.clientWidth - the width of the visible area of ​​the web page
document.body.clientHeight - the height of the visible area of ​​the web page

document.body.offsetWidth - the width of the visible area of ​​the web page, including the width of the edges and scroll bars
document.body.offsetHeight - the height of the visible area of ​​the web page, including the height of the edges and scroll bars [FF, chrom is the height of the entire page, IE opera is normal]

document.body.scrollWidth - the total width of the web page
document.body.scrollHeight - the total height of the web page

document.body.scrollTop - When there is a scroll bar, drag the scroll bar downwards and the height of the part that is not displayed above
document.body.scrollLeft - Same as above

window.innerHeight - The inner height of the browser window

window.innerWidth - The inner width of the browser window

window.screenTop - the distance between the top of the web document and the top of the screen on the text part of the web page, but FF does not support it. Chrom, IE, and Opera behave differently, so use with caution]
window.screenLeft - The left side of the web page text [the distance between the far left of the web page document and the far left of the screen, but FF does not support it. Chrom, IE, and Opera behave differently, so use with caution]

window.screen.height - the height of the screen resolution
window.screen.width - the width of the screen resolution

window.screen.availHeight - available work area height [entire screen but not including lower taskbar]
window.screen.availWidth - Available work area width [width of entire screen]

window.screen.clorDepth - screen color, commonly used 16, 32 bit, etc.
window.screen.deviceXDPI - screen pixels/inch [supported by IE, not supported by others]

JavaScript method to get page width and height

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

In my local test:
Can be used under IE, FireFox and Opera

document.body.clientWidth
document.body.clientHeight

You can get it now, it’s very simple and convenient.
And among company projects:
Opera still uses

document.body.clientWidth
document.body.clientHeight

But IE and FireFox use

document.documentElement.clientWidth
document.documentElement.clientHeight

It turns out it’s W3C’s standards that are causing trouble

958d744a298c46c0daa211c304ba8ee6
If you add this line of tags to the page

In IE:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

In FireFox:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

In Opera:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

And if there is no W3C standard defined, then

IE is:

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox is:

Copy code The code is as follows:

document.documentElement.clientWidth ==> Page object width (that is, BODY object width plus Upper margin width)
document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)

Opera is:

Copy code The code is as follows:

document.documentElement.clientWidth ==> Page object width (i.e. BODY Object width plus Margin width)
document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)

The above is the entire content of this article, I hope you all like it.