JS access to various browser window size method _javascript Tips

Common:
JS Get browser window size

Copy Code code as follows:

Get window width
if (window.innerwidth)
Winwidth = window.innerwidth;
else if ((document.body) && (document.body.clientWidth)
Winwidth = Document.body.clientWidth;
Get window Height
if (window.innerheight)
Winheight = Window.innerheight;
else if ((document.body) && (document.body.clientHeight)
Winheight = Document.body.clientHeight;
Get the window size by detecting the body inside the Document
if (document.documentelement && document.documentElement.clientHeight && Document.documentElement.clientWidth)
{
Winheight = Document.documentElement.clientHeight;
Winwidth = Document.documentElement.clientWidth;
}

Detailed:
About getting the various browser-visible window sizes:
<script>
function GetInfo ()
{
var s = "";
s = "Web page visible area wide:" Document.body.clientWidth;
s = "Web page visible Area High:" Document.body.clientHeight;
s = "Web page visible area wide:" Document.body.offsetWidth "(including Edge and scroll bar width)";
s = "Web page visible Area High:" Document.body.offsetHeight "(including the width of the sideline)";
s = "page body Full text width:" document.body.scrollWidth;
s = "Web page full text High:" Document.body.scrollHeight;
s = "The Web page is rolled off high (FF):" DOCUMENT.BODY.SCROLLTOP;
s = "The Web page is rolled off high (ie):" DOCUMENT.DOCUMENTELEMENT.SCROLLTOP;
s = "The Web page is rolled away left:" Document.body.scrollLeft;
s = "page body part:" WINDOW.SCREENTOP;
s = "page body part left:" Window.screenleft;
s = "High screen resolution:" Window.screen.height;
s = "width of screen resolution:" WINDOW.SCREEN.WIDTH;
s = "Screen available workspace height:" window.screen.availHeight;
s = "Screen available workspace width:" window.screen.availWidth;

s = "Your screen setting is" window.screen.colorDepth "bit color";
s = "Your screen setting" Window.screen.deviceXDPI "pixel/inch";
alert (s);
}
GetInfo ();
</script>
In my local test:
In IE, FireFox, opera can be used
Document.body.clientWidth
Document.body.clientHeight
Can be obtained, very simple, very convenient.
And in the company project:

Opera still uses
Document.body.clientWidth
Document.body.clientHeight

But IE and Firefox use
Document.documentElement.clientWidth
Document.documentElement.clientHeight

It's the standard of the consortium.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

If you add this line of markup to the page in IE:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

In Firefox:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

In Opera:
Document.body.clientWidth ==> Visible Area width
Document.body.clientHeight ==> Visible Area height
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width)
Document.documentElement.clientHeight ==> Page Object height (that is, height of the body object plus margin high)
If the standard of the consortium is not defined, the

IE is:
Document.documentElement.clientWidth ==> 0
Document.documentElement.clientHeight ==> 0

Firefox is:
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight = = > Height of the Page object (that is, the height of the body object plus margin high)

Opera is:
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight = = > Height of the Page object (that is, the height of the body object plus margin high)