On the innerwidth and innerheight of JavaScript

Innerwidth and Innerheight Properties

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     alert (width) for the width and height receive windows, respectively;        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 ———————— */     var width=window.innerwidth,height=window.innerheight;             alert (width);        Width does not change, or 1920px     alert (height);   The height of the window is 990px, indicating that the taskbar occupies 40px (the default height of the taskbar), resulting in not getting to full height/     * ———————— and killing the tab, and after adding the developer option ———————— */     var width= Window.innerwidth,height=window.innerheight;     alert (width);        1381PX, indicating browser developer options, has an effect on innerwidth 1920-1381=549px      alert (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

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 this way var width = Window.innerwidth,height = Window.innerheight;if (          typeof width! = ' 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 is possible that IE6 or the following version (when the previous browser parsed the CSS, did not comply with the Web Standard) width = document.body.clientWidth;          Web page visible area wide height = document.body.clientHeight;        Web page visible Area high} alert (width); alert (height);