Home >Web Front-end >JS Tutorial >Detailed explanation of the use of innerWidth and innerHeight in JavaScript

Detailed explanation of the use of innerWidth and innerHeight in JavaScript

小云云Original: 2018-01-24 15:46:181609browse

This article mainly brings 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, I hope it can help everyone.

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; //Define width and height respectively to receive the height and width of the window

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

##alert(height); //The height of the window is 950px

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

This time the blogger removed the taskbar in turn ( In fact, it is hidden) and the tab 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

Conclusion: It means that innerHeight and innerWidth do only count the display window pixels, if there is no menu bar , toolbars and other external factors squeeze it, it will automatically extend, and 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>  
    window.onload=function(){
     /*————————p超出长度,带着滚动条后————————*/
     var width=window.innerWidth,height=window.innerHeight;  
      alert(width);  //窗口的宽度 1920px
      alert(height); 　　//窗口的高度 950px
   }
   </script>
  </body>

　　 </html>

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 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

Let’s talk about IE, which has the most flaws, about IE compatibility The problem can be solved like this

//兼容代码可以这样子写
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);

Related recommendations:

About innerWidth and innerHeight of JavaScript

innerWidth() in jQuery Method usage example_jquery

jQuery innerHeight() method usage example_jquery

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

JavaScript chrome var 对象 alert

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how to use the es6 three-dot operatorNext article：Detailed explanation of how to use the es6 three-dot operator

See more

Detailed explanation of the use of innerWidth and innerHeight in JavaScript

Related articles