Common:
JS Get browser window size
- //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;
- //Detect the body by deep inside the Document, get the window size
- if (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:
- function getInfo ()
- {
- var s = "";
- s = "width of the visible area of the webpage:" 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 edges and scroll bars);
- s = "page visible area High:" document.body.offsetHeight " (including the width of the edge)";
- s = "Full text width of the Web page:" document.body.scrollWidth;
- s = "The full text of the Web page is High:" document.body.scrollHeight;
- s = "page is rolled off high (FF):" document.body.scrollTop;
- s = "webpage is rolled high (ie):" document.documentElement.scrollTop;
- s = "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 ();
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 browser wide variety of high