JS Get browser window size

JS get browser window size

Common :

JS Get browser window size

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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 examining the body inside the Document if (document.documentelement && document.documentElement.clientHeight && Document.documentElement.clientWidth) { Winheight = Document.documentElement.clientHeight; Winwidth = Document.documentElement.clientWidth; }

Detail :

About getting the various browser visible window sizes:
<script>
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 ();
</script>
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 browser window size