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
Get browser window width including scrollbar
提问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.clientWidth
is the width excluding the scrollbars. The window.outerWidth
is the width including the scrollbars and other window elements like the window border. The window.innerWidth
is the actual width of the window, including scrollbars, but not including the window border.
第一个答案很接近,但经过进一步检查,它有点复杂。的body.clientWidth
是不包括滚动条的宽度。的window.outerWidth
是包括滚动条和其他窗口元素,如窗口边界的宽度。该window.innerWidth
是窗口,包括滚动条的实际宽度,但不包括窗口边框。
回答by minlare
window.innerWidth
seems to be the correct answer when needed for responsive design
window.innerWidth
在响应式设计需要时似乎是正确的答案
回答by Caleb Runion
window.innerWidth
will 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.innerWidth
is equal to the calculated CSS unit 100vw
. However, window.outerWidth
will 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.outerWidth
would be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidth
would return the width of just the webpage + scroll bar.
例如,如果您有Chrome的开发工具开放内部的浏览器,window.outerWidth
将是网页+的宽度滚动条+ Chrome的开发者工具检查。虽然window.innerWidth
会返回网页 + 滚动条的宽度。