How to get the window size of various browsers in JavaScript?

Due to differences in browsers, compatibility must be considered when obtaining a lot of information. The available size of the document in the window is information that is often needed. Due to different browsers and even different versions, the acquisition methods are also different. This article introduces The function is compatible with various browsers to obtain this information. At the same time, the article also explains in detail the differences in how browsers handle this information.

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: " document.body.offsetWidth " (Including the width of the side lines and scroll bars)"; <br/>s = "The height of the visible area of ​​the web page: " document.body.offsetHeight " (Including the width of the side lines)"; <br/>s = "The width of the full text of the web page: " document .body.scrollWidth; <br/>s = "The height of the full text of the web page:" document.body.scrollHeight; <br/>s = "The height of the scrolled web page (ff):" document.body.scrollTop; <br/>s = "The height to which the web page is scrolled (ie):" document.documentElement.scrollTop; <br/>s = "The left side of the web page to be scrolled:" document.body.scrollLeft; <br/>s = "The main text of the web page:" " window.screenTop; <br/>s = " The left part of the web page text: " window.screenLeft; <br/>s = " The height of the screen resolution: " window.screen.height; <br/>s = " The height of the 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;<br/> 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:

In IE, FireFox, Opera You can use
document.body.clientWidth
document.body.clientHeight
to get it. It is very simple and convenient.
In 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 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 ==> Page object height ( That is, the height of the BODY object plus the height of the Margin)
If the W3C standard is not defined, the

IE is:

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

FireFox is:

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)

Opera is:

document.documentElement.clientWidth ==> Page object width (ie, BODY object width plus Margin width) document.documentElement.clientHeight ==> Page object height (ie, BODY object height plus Margin height)

JS Get browser window size

// 获取窗口宽度 
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; 
}

The above is the detailed content of How to get the window size of various browsers in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!