jQuery 获取浏览器窗口宽度,包括滚动条

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19582862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:14:32  来源:igfitidea点击:

Get browser window width including scrollbar

javascriptjquerygoogle-chromefirefox

提问by user1995781

I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.

我试图用$(window).width();. 在 IE 10 上,它会返回完整的浏览器宽度,包括滚动条。但是,在 Firefox 和 Chrome 上,两者都返回没有滚动条的值。

How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.

如何将浏览器宽度包含在滚动条中?因为我需要检测到的宽度与 CSS 完全相同。

Thanks.

谢谢。

采纳答案by infidel

This will get the full Window's width:

这将获得整个窗口的宽度:

 window.outerWidth

NOTE:jQuery's outerWidth()doesn't work on $(window)

注意:jQueryouterWidth()不起作用$(window)

回答by Jamie Thomas

The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidthis the width excluding the scrollbars. The window.outerWidthis the width including the scrollbars and other window elements like the window border. The window.innerWidthis the actual width of the window, including scrollbars, but not including the window border.

第一个答案很接近,但经过进一步检查,它有点复杂。的body.clientWidth是不包括滚动条的宽度。的window.outerWidth是包括滚动条和其他窗口元素,如窗口边界的宽度。该window.innerWidth是窗口,包括滚动条的实际宽度,但不包括窗口边框。

enter image description here

在此处输入图片说明

回答by minlare

window.innerWidthseems to be the correct answer when needed for responsive design

window.innerWidth在响应式设计需要时似乎是正确的答案

回答by Caleb Runion

window.innerWidthwill give the width of the HTML andthe scrollbar. This value is the value used for device width breakpoints when using media queries in CSS. Essentially, window.innerWidthis equal to the calculated CSS unit 100vw. However, window.outerWidthwill give you the width of the entire window.

window.innerWidth将给出 HTML滚动条的宽度。此值是在 CSS 中使用媒体查询时用于设备宽度断点的值。本质上,window.innerWidth等于计算出的 CSS unit 100vw。但是,window.outerWidth会给你整个窗口的宽度。

For example, if you had Chrome's Dev Tools open insideof the browser, window.outerWidthwould be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidthwould return the width of just the webpage + scroll bar.

例如,如果您有Chrome的开发工具开放内部的浏览器,window.outerWidth将是网页+的宽度滚动条+ Chrome的开发者工具检查。虽然window.innerWidth会返回网页 + 滚动条的宽度。