Common:
JS Get browser window size
//Get window widthif(window.innerwidth) winwidth=window.innerwidth;Else if((document.body) &&(document.body.clientWidth)) Winwidth=Document.body.clientWidth;//Get window Heightif(window.innerheight) winheight=Window.innerheight;Else if((document.body) &&(document.body.clientHeight)) Winheight=Document.body.clientHeight;//get the window size by examining the body inside the Documentif(Document.documentelement && document.documentElement.clientHeight &&document.documentElement.clientWidth) {winheight=document.documentElement.clientHeight; Winwidth=Document.documentElement.clientWidth;}
With:
About getting the various browser visible window sizes:
functionGetInfo () {vars = ""; s= "width of page visible area:"Document.body.clientWidth; s= "page visible area High:"Document.body.clientHeight; s= "width of the visible area of the page:" Document.body.offsetWidth "(including the width of the edge and scroll bar)"; s= "page visible area High:" Document.body.offsetHeight "(including edge width)"; s= "Page body Full text width:"Document.body.scrollWidth; s= "page body full text High:"Document.body.scrollHeight; s= "Web page is rolled off high (FF):"Document.body.scrollTop; s= "Web page is rolled off high (ie):"Document.documentElement.scrollTop; s= "The webpage is rolled away left:"Document.body.scrollLeft; s= "On the body part of the webpage:"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 work area height:"Window.screen.availHeight; s= "Screen available work area width:"Window.screen.availwidth;s= "Your screen setting is" window.screen.colorDepth "bit Color"; s= "Your screen settings" Window.screen.deviceXDPI "Pixels/inch"; //alert (s);} getInfo ();
In my local test:
Can be used under IE, FireFox, opera
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 "the".
<! 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 tag 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 ==> The width of the page object (that is, the body object width plus the margin width)
Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)
And if there is no standard to define 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) Document.documentElement.clientHeight = = > Page object height (i.e. body object height plus margin)
Opera is:
Document.documentElement.clientWidth ==> Page object width (i.e. body object width plus margin) Document.documentElement.clientHeight = = > Page object height (i.e. body object height plus margin)
JS get a variety of browser window size method