Detailed explanation of innerWidth and innerHeight in JavaScript

The following editor will bring you a brief discussion of innerWidth and innerHeight of JavaScript. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look.

innerWidth and innerHeight properties

Description: The read-only property of the window object declares the document of the window The height and width of the display area, measured in pixels (px). (Note: The width and height here do not include the height of the menu bar, toolbar, scroll bar, etc.)

The following will verify these two properties:

Screen resolution is: 1920x1080 Browser: QQ browser (kernel is Chrome) The code is as follows:

var width=window.innerWidth,height=window.innerHeight; //define width respectively and height receive the height and width of the window

alert(width); //The width of the window is 1920px

/*————————干掉任务栏后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //宽度没有变化,还是1920px alert(height); 　　//而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度 /*————————又干掉标签页后，并加上开发者选项后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px alert(height); 　　//而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

Conclusion:It means that innerHeight and innerWidth do only calculate the display window pixels. If there are no external factors such as menu bar, toolbar and so on to squeeze it, it will automatically extend, and If there is, just press the display form

Conclusion:It means that the internal scroll bar has no effect on innerWidth. Even if it exists, it has no effect on width. It is still 1920px

Final conclusion:innerHeight and innerWidth obtain the height and width of the form. External factors such as (browser developer options, favorites) will have an impact on it, while internal factors (scroll bars) will have no impact on it

//兼容代码可以这样子写 var width = window.innerWidth,height = window.innerHeight; if (typeof width != 'number') { //如果类型不为number,表示该浏览器不支持innerWidth属性 if (document.compatMode == 'CSS1Compat') { //CSS1Compat：判断是否为标准兼容模式。 width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准) width = document.body.clientWidth; //网页可见区域宽 height = document.body.clientHeight; //网页可见区域高 } alert(width); alert(height);

The above is the detailed content of Detailed explanation of innerWidth and innerHeight in JavaScript. For more information, please follow other related articles on the PHP Chinese website!