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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.