JavaScript gets the browser visual area dimension code

The code is as follows	Copy Code
Document.body.offsetWidth Document.body.offsetHeight

In a browser that declares DOCTYPE, you can use the following to get the browser display window size:

The code is as follows	Copy Code
Document.documentElement.clientWidth Document.documentElement.clientHeight

Ie,ff,safari supports this method, although opera supports this property, but returns the page size;

At the same time, all browsers except IE have this information saved in the Window object, which can be obtained using the following:

The code is as follows	Copy Code
Window.innerwidth Window.innerheight

Instance

After a number of online search and many experiments,

Found in fact also simple (test premises, using the DTD of HTML 4.01):

The code is as follows	Copy Code
<script type= "Text/javascript" > var IW = document.documentElement.clientWidth; var IH = document.documentElement.clientHeight; Alert (IW + ' x ' + IH); </script>

The test passed on IE 8+,firefox 3.6,chrome 7.0,safari 5.0,

Adjust their visual window to almost 800x600 size,

The resulting values are very close to this value.

---------------------------the legendary dividing line------------------------

Of course

If you need to be compatible with IE 6, further testing is required.

If you have tried friends, please leave a message and tell me the result.

Other reference

Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth
Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

HTML precise positioning: Scrollleft,scrollwidth,clientwidth,offsetwidth
ScrollHeight: Gets the scrolling height of an object.
ScrollLeft: Sets or gets the left distance between the left edge of the object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property
Offsetleft: Gets the object relative to the layout or by the offsetparent Calculates the left position of the parent coordinates specified by the
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx The horizontal coordinates of the document (excluding the x of the scroll bar)
Event.clienty relative to the vertical coordinates of the document (not including y of the scrollbar)
Event.offsetx The horizontal coordinate of the container
Event.offsety relative to the container's vertical coordinate
Document.documentElement.scrollTop the vertical scrolling value
Event.clientx+document.documentelement.scrolltop The horizontal coordinate of the document + The amount of vertical scrolling event.clientx/event.clienty: When an event occurs, the mouse is positioned relative to the upper-left corner of the viewable document area of the browser window, which, in the DOM standard, does not take into account scrolling of the document, that is, no matter where the document scrolls, As long as the event occurs in the upper-left corner of the window, Clientx and clienty are 0, so in IE, to get the coordinates of the event to occur relative to the beginning of the document, add Document.body.scrollLeft and DOCUMENT.BODY.SCROLLTOP). Even.keycode: Returns the code that pressed the key at the time of KeyDown KeyUp event, and the Unicode character of the KeyPress event; (Firefox2 does not support Event.keycode, you can use Event.which instead)