JS method to obtain various browser window sizes_javascript skills

Commonly used:
JS Get browser window size

Copy code The code is as follows:

// Get the 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;
// Detect the body by going deep inside the Document and get the window size
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

Details:
About getting the visible window size of various browsers:
<script> <br>function getInfo() <br>{ <br> var s = ""; <br>s = "The width of the visible area of ​​the web page:" document.body.clientWidth; <br>s = "The height of the visible area of ​​the web page:" document.body.clientHeight; <br>s = "The width of the visible area of ​​the web page:" Area width: " document.body.offsetWidth " (including the width of the edges and scroll bars)"; <br>s = " Height of the visible area of ​​the web page: " document.body.offsetHeight " (including the width of the edges)"; <br> s = "The full text width of the web page body:" document.body.scrollWidth; <br>s = "The full text height of the web page body:" document.body.scrollHeight; <br>s = "The scrolled height of the web page (ff):" document.body.scrollTop; <br>s = "The height to which the webpage is scrolled(ie):" document.documentElement.scrollTop; <br>s = "The left side to which the webpage is scrolled:" document.body.scrollLeft; <br>s = "The top part of the webpage text:" window.screenTop; <br>s = "The left part of the webpage text part:" window.screenLeft; <br>s = "The height of the screen resolution:" window.screen.height; <br>s = "Screen resolution width:" window.screen.width; <br>s = "Screen available work area height:" window.screen.availHeight; <br>s = "Screen available work area width:" " window.screen.availWidth; <p>s = "Your screen setting is " window.screen.colorDepth " bit color "; <br>s = " Your screen setting is " window.screen.deviceXDPI " pixels/inch"; <br>//alert (s); <br>} <br>getInfo(); <br></script>
In my local test:
It works under IE, FireFox and Opera Use
document.body.clientWidth
document.body.clientHeight
to get it, 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 that the W3C standard is causing trouble

If you add this line of tags 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, BODY object width plus Margin width)
document.documentElement.clientHeight ==>gt; Page object height (that is, BODY object height plus Margin height)
And if it is not defined W3C standards, then

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

FireFox is:
document.documentElement.clientWidth ==> page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> page object height ( That is, the height of the BODY object plus the height of the Margin)

Opera is:
document.documentElement.clientWidth ==> page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> page object height ( That is, the height of the BODY object plus the height of the Margin)