On the innerwidth and innerheight of JavaScript

Innerwidth and Innerheight Property Description: A read-only property of the Window object that declares the height and width of the document display area of the windows, measured in pixels (px). (Note: The width and height do not include the height of the menu bar, toolbar, scroll bar, etc.)

These two properties are validated as follows:

The screen resolution is: 1920x1080 Browser: QQ browser (kernel is chrome) code as follows:

var width=window.innerwidth,height=window.innerheight;         // defines the height and width of the receive window for width and height, respectively     alert (width);        // width of window 1920px     alert (height);   // height of window  950px　　

Innerwidth because there are no obstructions on both sides of the browser, so perfect to get the width of the screen 1920, and Innerheight because the browser has a toolbar, the display and the taskbar, so it was squeezed out of 130px

This time the blogger kills the taskbar (which is actually hidden) and the tabs in the toolbar and presses F12 plus the developer option to test again:

     /*———————— Kill the taskbar ————————*/     varwidth=window.innerwidth,height=Window.innerheight;        alert (width); //width does not change, or 1920pxalert (height);//the height of the window is 990px, indicating that the taskbar occupies 40px (the default height of the taskbar), resulting in not getting all the height     /*———————— After you kill the tab and add the developer options ————————*/     varwidth=window.innerwidth,height=Window.innerheight;        alert (width); //1381px, explains browser developer options, has an impact on innerwidth 1920-1381=549pxalert (height);//the height of the window is 979px, the taskbar is 40px, the tab is 11px (990-979) and the rest of the toolbar takes up 1080-979=101px

Conclusion: It is shown that innerheight and innerwidth do only calculate the display window pixels, and if there is no external factor such as a menu bar or toolbar to squeeze it, it will automatically extend, and if so, just press the show form.

After testing the external factors, let's test the internal factor scroll bar

window.onload=function(){                    /*———————— Div exceeds the length, with a scrollbar ————————*/                    varwidth=window.innerwidth,height=Window.innerheight;        alert (width); //width of window 1920pxalert (height);//height of window 950px            }            </script> </body>
Conclusion: It is indicated that the internal ScrollBar has no effect on innerwidth, even if there is no effect on width, it is still 1920px
The final conclusion: Innerheight and Innerwidth get the height and width of the form, external factors such as (Browser developer options, favorites) will have an impact on it, and the internal factor (scroll bar) has no effect on it
Here is the most trough point ie, about IE compatibility issues, can be resolved

//compatible code can write like thisvarwidth = Window.innerwidth,height =Window.innerheight;if(typeofWidth! = ' number ') {//If the type is not number, it means that the browser does not support the Innerwidth property    if(Document.compatmode = = ' Css1compat ') {//Css1compat: Determines whether it is a standard compatibility mode. width=Document.documentElement.clientWidth; Height=Document.docuementElement.clientHeight; } Else{//is not a standard mode, it may be IE6 or the following version (the previous browser did not comply with the standard when parsing the CSS)width= Document.body.clientWidth;//width of visible area of Web pageHeight= Document.body.clientHeight;//High Visibility area of Web page} alert (width); alert (height);
The article is probably over (the first time, there is no understanding of the place is also looking at the Great God Advice)
On the innerwidth and innerheight of JavaScript