使用window.innerWidth
window.innerWidth属性包含了浏览器窗口的视口宽度，包括垂直滚动条的宽度，这个值会随着窗口大小的改变而改变。
var width = window.innerWidth;
使用document.documentElement.clientWidth
document.documentElement.clientWidth返回的是视口的宽度，不包括滚动条。
var width = document.documentElement.clientWidth;
使用window.outerWidth
window.outerWidth返回浏览器窗口的外部宽度，包括工具栏和滚动条。
var width = window.outerWidth;
使用window.screen.width
window.screen.width返回屏幕的宽度，单位为像素，这个值不会随着浏览器窗口大小的改变而改变。
var width = window.screen.width;
使用matchMedia
matchMedia方法返回一个新的MediaQueryList对象，表示文档是否匹配指定的媒体查询字符串。
if (window.matchMedia("(maxwidth: 600px)").matches) {
/* 如果媒体查询匹配则执行的代码 */
} else {
/* 如果媒体查询不匹配则执行的代码 */
}
相关问题与解答
Q1: 这些方法在所有浏览器中都可用吗？
A1: 不是所有的方法在所有浏览器中都可用。window.innerWidth和window.outerWidth在IE9及以上版本中可用，但在更早的版本中不可用，如果你需要支持旧版本的浏览器，可能需要使用一些后备方案或者polyfills。
Q2: 我应该使用哪种方法来检测浏览器宽度？
A2: 这取决于你的具体需求，如果你只是想获取视口的宽度，那么window.innerWidth或document.documentElement.clientWidth可能是最好的选择，如果你需要获取整个屏幕的宽度，那么应该使用window.screen.width，如果你需要根据特定的媒体查询来改变页面的布局或行为，那么matchMedia可能是最合适的方法。
来源互联网整合，作者：小编，如若转载，请注明出处：https://www.aiboce.com/ask/9267.html
