浏览器窗口可视区域大小

Posted 2020-07-21

 

　　h5的特色响应式布局真是让一大堆前段工作者喷了一身血〒_〒，纯css和html5布局总是出错的我相信不止我一个o(^▽^)o~那么这种时候用js获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）就显得尤为重要了~ 废话少说我们来总结下获取的方法：

• 对于IE9+、Chrome、Firefox、Opera 以及 Safari：

var h = window.innerHeight；   //浏览器窗口的内部高度
var w = window.innerWidth；   //浏览器窗口的内部宽度

• 对于 Internet Explorer 8、7、6、5：

  var h = document.documentElement.clientHeight   //HTML文档所在窗口的当前高度
  var w = document.documentElement.clientWidth   //HTML文档所在窗口的当前宽度。

  还有一种方法：

var h = document.body.clientHeight;
var w = document.body.clientWidth;

 

　　那怎么办？在不同的浏览器里都可以兼容的写法是什么呢？如下：

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

　　所以一开始就养成好习惯吧，习惯用最兼容的方法写，尽管它长了点儿o(^▽^)o~

　　至于height、clientHeight、scrollHeight、offsetHeight之间的区别，详细的图解   http://www.cnblogs.com/yuteng/articles/1894578.html