JavaScript's understanding of how to get the browser's visual window in several compatible formulations

1. Overview of the Browser visual window :

　　　The browser viewable area is not the size of the body of the page. The viewable area refers to the size of the page area of the content of the middle page after the browser subtracts the above menu bar, the toolbar, the status bar below the taskbar, and the right scroll bar (if any). The body size is changed with the content adjustment, can be large and small. If there is a scroll bar, the body is larger than the visible area

2. Different types of browsers or versions:　　　　

Window.innerheight- Internal height of the browser window
window.innerwidth-Internal width of the browser window
Span style= "font-family: Young round;　　font-size:18px "for Internet Explorer 8, 7, 6, 5:

Document.documentElement.clientWidth represents the current width of the window in which the HTML document is located (the internal width of the browser window)

document.body.clientheight  (internal height of body tag)
Document.body.clientWidth (internal width of body tag)

In summary, the compatibility JavaScript scenarios that are practical in different browsers are as follows:
var w= window.innerwidth | | Document.documentElement.clientWidth | | Document.body.clientWidth;
var h= window.innerheight | | document.documentelement.clientheight| | Document.body.clientHeight;

3. Understanding of the latter two of the compatibility:

　　　3.1 The object is different (the former is a browser object, the latter is a body object), and the result is not exactly the same

3.2 In the browser by default, the body has 8-10px around the margin, and the visible area includes this margin, so if we use body{padding:0;margin:0;} To eliminate this default condition. Then the values of Document.body.clientWidth and document.documentElement.clientWidth will be the same.

　　

JavaScript's understanding of how to get the browser's visual window in several compatible formulations