**Commonly used: JS gets the size of the browser window **

//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;
}

**Details: **About getting visible window sizes for various browsers: < Script> The function getInfo () { Var s = ""; S = “page visible region wide:” document. Body. ClientWidth; S = “page visible region high:” document. Body. ClientHeight; S = “page visible region wide:” document. The body. The offsetWidth “(including the edges and the width of the scroll bar)”; S = “page visible region high:” document. The body. The offsetHeight “(including line width)”; S = “full width page text:” document. Body. ScrollWidth; S = “high full page text:” document. Body. ScrollHeight; S = “web page volume high (ff) :” document.body.scrolltop; S = “web swept to high (ie),” the document. The documentElement. ScrollTop; S = “to the left of the page to be rolled:” document.body.scrollleft; S = “window.screenTop; S = “left of body:” window.screenLeft; S = “window.screen.height; S = “width of screen resolution:” window.screen.width; S = “screen can use the workspace height:” window. Screen. AvailHeight; S = “screen available workspace width:” window.screen.availwidth;

S = “your screen setting is” window.screen.colordepth ”; S = “your screen Settings” window.screen.devicexdpi “pixels per inch ”; / / alert (s); } GetInfo (); < / script> **In my local test: **It works with IE, FireFox, and Opera Document. Body. ClientWidth Document. Body. ClientHeight Accessible, very simple, very convenient. And in the company’s projects:

**Opera still USES **Document. Body. ClientWidth Document. Body. ClientHeight

**Internet explorer and FireFox do **Document. The documentElement. ClientWidth Document. The documentElement. ClientHeight

W3C standards are to blame < ! PUBLIC DOCTYPE HTML ”- / / / / 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. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area

**In FireFox: **Document. Body. ClientWidth = = > BODY object width Document. Body. ClientHeight = = > BODY object height Document. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area  

**In the Opera: **Document. Body. ClientWidth = = > Visible area width Document. Body. ClientHeight = = > Height of visible area Document. The documentElement. ClientWidth = = > Page object width (that is, BODY object width plus Margin width) Document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height) If no W3C standard is defined, then

**IE is: **Document. The documentElement. ClientWidth = = > 0 Document. The documentElement. ClientHeight = = > 0

**FireFox is: **Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

**The Opera is: **Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)