[Recommendation] details about JS screen computing

During a job, a menu is displayed to move the screen height. the calculated values on the screen vary in different browsers. It is estimated that a small test is performed on the calculation of each attribute on the screen, hoping to help the same degree.

The following are the default values of screen Calculation for new IE pages:
FF and IE both support (computing differences) visible area width of the webpage [document. body. clientWidth]: 1239
FF and IE both support (computing differences) the visible area of the webpage is high [document. body. clientHeight]: 0
FF and IE both support (computing differences) visible area width of the webpage [document. body. offsetWidth]: 1239
FF and IE both support (computing differences) the visible area of the webpage is high [document. body. offsetHeight]: 0
Both FF and IE support (computing differences) The full text width of the webpage [document. body. scrollWidth]: 1239
Both FF and IE support (computing differences) The full text height of the webpage [document. body. scrollHeight]: 0
FF and IE both support (calculation is the same) the height of the page to be rolled [document. body. scrollTop]: 0
FF and IE both support (same calculation) the width of the webpage to be rolled [document. body. scrollLeft]: 0
Only IE is supported: window. screenTop: 144 on the webpage body
Only Internet Explorer is supported. window. screenLeft is displayed on the left of the webpage body.
FF and IE are both supported (the calculation is the same): the screen resolution height [window. screen. height]: 1024
FF and IE support (same calculation): screen resolution width [window. screen. width]: 1280
FF and IE are both supported (the calculation is the same): the height of the available workspace on the screen [window. screen. availHeight]: 990
FF and IE support (same calculation): available workspace width of the screen [window. screen. availWidth]: 1280
Both FF and IE are supported (calculation is different): The left [document. body. offsetLeft] of the form and the right [document. body. offsetTop]: 10 and 15
Both FF and IE support (calculation difference): Form height [document. body. offsetWidth] and width [document. body. offsetHeight]: 1239 and 0
Vertical scroll value: document.doc umentElement. scrollTop
Only the entire width and height of the FF browser are supported, excluding the toolbar [window. innerHeight]: undefined
Ffue and ieboth support (calculate the highest degree of disaster recovery on the webpage: document.doc umentElement. clientHeight): 820
FF and IE are both supported (calculation is the same): Get the maximum distance between the client and the window. document.doc umentElement. scrollTop]: 0

Calculation scope of each attribute of IE browser:

 

The following is the default value for calculating the FF new page screen:
The following are the default values for new page screen calculation:
FF and IE both support (computing differences) visible area width of the webpage [document. body. clientWidth]: 1264
FF and IE both support (computing differences) the visible area of the webpage is high [document. body. clientHeight]: 0
FF and IE both support (computing differences) visible area width of the webpage [document. body. offsetWidth]: 1264
FF and IE both support (computing differences) the visible area of the webpage is high [document. body. offsetHeight]: 0
Both FF and IE support (computing differences) The full text width of the webpage [document. body. scrollWidth]: 1264
Both FF and IE support (computing differences) The full text height of the webpage [document. body. scrollHeight]: 0
FF and IE both support (calculation is the same) the height of the page to be rolled [document. body. scrollTop]: 0
FF and IE both support (same calculation) the width of the webpage to be rolled [document. body. scrollLeft]: 0
Only Internet Explorer is supported: window. screenTop: undefined
Only Internet Explorer is supported. window. screenLeft is the left part of the webpage body. undefined is supported.
FF and IE are both supported (the calculation is the same): the screen resolution height [window. screen. height]: 1024
FF and IE support (same calculation): screen resolution width [window. screen. width]: 1280
FF and IE are both supported (the calculation is the same): the height of the available workspace on the screen [window. screen. availHeight]: 990
FF and IE support (same calculation): available workspace width of the screen [window. screen. availWidth]: 1280
Both FF and IE are supported (calculation is different): The left [document. body. offsetLeft] of the form and the right [document. body. offsetTop]: 0 and 0
Both FF and IE support (calculation difference): Form height [document. body. offsetWidth] and width [document. body. offsetHeight]: 1264 and 0
Vertical scroll value: document.doc umentElement. scrollTop
Only the entire width and height of the FF browser are supported, excluding the toolbar [window. innerHeight]: 829
Ffue and ieboth support (calculate the highest degree of disaster recovery on the webpage: document.doc umentElement. clientHeight): 858
FF and IE are both supported (calculation is the same): Get the maximum distance between the client and the window. document.doc umentElement. scrollTop]: 0

The above data shows that, in FF and IE, when calculating the screen width, FF is 25 pixels more than IE.