Home > Article > Web Front-end > Detailed explanation of innerWidth and innerHeight in JavaScript

Detailed explanation of innerWidth and innerHeight in JavaScript

黄舟Original: 2017-10-12 10:50:461702browse

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

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

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

This time the blogger killed the taskbar (actually hidden) and the tabs in the toolbar and pressed F12 and added 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 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

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

Let’s talk about IE which has the most flaws. Regarding IE compatibility issues, 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);

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!

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：rem absolute adaptive solution analysisNext article：rem absolute adaptive solution analysis

See more

Detailed explanation of innerWidth and innerHeight in JavaScript

Related articles