JavaScript HTML DOM Window innerWidth 和 innerHeight 属性

• 

  Window innerWidth 和 innerHeight 属性

  innerWidth属性返回窗口内容区域的宽度。innerHeight属性返回窗口内容区域的高度。这些属性是只读的。

  提示：使用outerWidth和outerHeight属性获取浏览器窗口的宽度/高度。

  获取当前帧的高度和宽度：

  var w = window.innerWidth;
  var h = window.innerHeight;

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  innerWidth 和 innerHeight	9.0+	1.0+	1.0+	3.0+	9.0+

• 

  语法

  返回innerWidth 和 innerHeight属性：

  window.innerWidth

  window.innerHeight
• 

  技术细节

  项目	描述
  返回值：	一个数字，表示浏览器窗口内容区域的宽度和/或内部高度，以像素为单位

• 

  更多例子

  跨浏览器解决方案（使用IE8及更早版本的clientWidth和clientHeight）：

  var w = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
  
  var h = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;
  

  尝试一下

  在一个示例中演示了innerWidth，innerHeight，outerWidth和outerHeight：

  var txt = "";
  txt += "<p>innerWidth: " + window.innerWidth + "</p>";
  txt += "<p>innerHeight: " + window.innerHeight + "</p>";
  txt += "<p>outerWidth: " + window.outerWidth + "</p>";
  txt += "<p>outerHeight: " + window.outerHeight + "</p>";
  

  尝试一下