求JavaScript跨浏览器获取设备宽度匹配Bootstrap断点的现代方案

核心推荐方案：使用原生matchMedia API #

直接调用浏览器的媒体查询引擎，和Bootstrap的CSS断点逻辑完全对齐，是跨浏览器最一致、最可靠的实现方式——无需手动计算宽度，也不依赖jQuery。

Bootstrap官方定义的断点阈值：

• 移动端（对应xs断点）：max-width: 575.98px
• 平板端（对应sm到md断点）：min-width: 576px 且 max-width: 991.97px

对应的原生JS实现：

export function isMobileBrowser() {
  return window.matchMedia('(max-width: 575.98px)').matches;
}

export function isTabletBrowser() {
  // 排除移动端范围，确保仅匹配平板视口
  return window.matchMedia('(min-width: 576px) and (max-width: 991.97px)').matches;
}

如果需要监听窗口大小/设备方向变化，可以添加监听事件：

// 监听移动端状态变化
const mobileMediaQuery = window.matchMedia('(max-width: 575.98px)');
mobileMediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    // 进入移动端视口逻辑
  } else {
    // 离开移动端视口逻辑
  }
});

手动获取宽度的替代方案（若有必要） #

如果必须手动获取视口宽度，推荐使用document.documentElement.clientWidth——它返回不含滚动条的视口宽度，和CSS媒体查询的width逻辑完全一致，跨浏览器表现稳定：

export function isMobileBrowser() {
  const viewportWidth = document.documentElement.clientWidth;
  return viewportWidth <= 575.98;
}

export function isTabletBrowser() {
  const viewportWidth = document.documentElement.clientWidth;
  return viewportWidth >= 576 && viewportWidth <= 991.97;
}

注意：window.innerWidth会包含垂直滚动条宽度，在桌面浏览器中会导致和Bootstrap断点的判断出现偏差，因此不推荐用于匹配响应式断点。

关于现有jQuery方法的优化说明 #

你当前使用的$(window).width()本质是对document.documentElement.clientWidth的封装，但原生JS已经能提供无依赖、更直接的实现，可避免jQuery版本差异带来的潜在兼容性问题。

为什么放弃User Agent检测 #

正如你提到的，User Agent字符串可被篡改，且设备类型和视口宽度没有绝对对应关系（比如大屏手机可模拟平板视口，平板也能缩小窗口到移动端范围），因此基于视口宽度的检测才是和Bootstrap响应式逻辑匹配的正确方式。

内容的提问来源于stack exchange，提问作者Baraiboapex