js获取浏览器宽度高度（整理）

89 阅读 0 评论 59 点赞

我是靠谱客的博主乐观荷花，这篇文章主要介绍js获取浏览器宽度高度（整理），现在分享给大家，希望可以做个参考。

在获取浏览器宽度的时候，许多时候需要考虑滚动条的存在。

一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。

一、使用JQuery获取浏览器宽度
重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）

复制代码

1
2
3
//JQuery 获取浏览器宽度 ：浏览器的可视宽度-滚动条的宽度(如果出现垂直方向滚动条)
var winWidth = $(window).width();

二、使用Js 获取浏览器宽度

● window.outerWidth：浏览器宽度，包含了浏览器边框所以这种方式不常用。
● window.outerHeight：浏览器高度
● window.innerWidth：浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。
● window.innerHeight：浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。

从window.resize 事件中获取浏览器宽度：

复制代码

1
2
3
4
5
6
        $(window).resize(function (e) {

            //var innerWidth = e.currentTarget.innerWidth;
            var innerWidth = window.innerWidth;