About innerWidth and innerHeight of JavaScript-PHP Tutorial-php.cn

About innerWidth and innerHeight of JavaScript

一个新手

Release： 2023-03-16 15:44:02

Original

1440 people have browsed it

innerWidth and innerHeight properties

Description: The read-only property of the window object declares the height and width of the document display area of the window, 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:

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

 var width=window.innerWidth,height=window.innerHeight;         //分别定义width和height接收窗口的高和宽
     alert(width);        //窗口的宽度 1920px
     alert(height);   　　//窗口的高度  950px

Copy after login

innerWidth Because there are no obstructions on both sides of the browser, the width of the screen is perfectly obtained, 1920, and Because there is a toolbar on the browser and a taskbar on the display, innerHeight was squeezed out by 130px

This time the blogger removed the taskbar (actually hidden) and the tabs in the toolbar. And press F12 and add developer options to test again:

     /*————————干掉任务栏后————————*/
     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

Copy after login

Conclusion: It means that innerHeight and innerWidth do only count the display window pixels. If there is no menu bar or toolbar When external factors squeeze it, it will automatically extend. If there is, just press the display form.

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

　　<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                
        <title>测试innerHeight属性</title>
            
        </head>
        
        <body>
        <p style="width:500px;height:1300px;background-color:red;"></p>
        
        <script>=
                     width=window.innerWidth,height=
                     alert(height);   　　</script>
        </body>
　　 </html>

Copy after login

Conclusion: It shows 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 form The height and width of Let’s take a look at IE, which has the most flaws. Regarding the issue of IE compatibility, it can be solved like this

//兼容代码可以这样子写var width = window.innerWidth,height = window.innerHeight;if (typeof width != &#39;number&#39;) {       //如果类型不为number,表示该浏览器不支持innerWidth属性

    if (document.compatMode == &#39;CSS1Compat&#39;) {          //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);

Copy after login

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