如何用JavaScript检测User Agent变更并实现DevTools修改UA后自动刷新？

当用户通过DevTools修改UA后，当前页面的window.navigator.userAgent不会即时更新，要实现自动刷新页面，可以用以下几种方案：

方案1：定时检查UA变化 #

这是最直接的实现方式，记录页面加载时的初始UA，定时对比当前UA，一旦不一致就刷新页面：

// 保存页面加载时的初始UA
const initialUA = window.navigator.userAgent;

// 每隔1秒检查一次UA
setInterval(() => {
  const currentUA = window.navigator.userAgent;
  if (currentUA !== initialUA) {
    window.location.reload();
  }
}, 1000);

你可以根据需求调整检查间隔，比如改成2-3秒来降低性能消耗。

方案2：用MutationObserver监听navigator属性（部分浏览器支持） #

部分Chromium内核浏览器（如Chrome、Edge）允许通过MutationObserver监听navigator的属性变化，但userAgent是不可枚举属性，Firefox等浏览器可能不支持这种方式：

const initialUA = window.navigator.userAgent;

const observer = new MutationObserver(() => {
  const currentUA = window.navigator.userAgent;
  if (currentUA !== initialUA) {
    window.location.reload();
    observer.disconnect(); // 刷新前终止监听
  }
});

// 监听navigator对象的属性变更
observer.observe(window.navigator, {
  attributes: true,
  attributeOldValue: true,
  subtree: false
});

方案3：结合媒体查询触发检查 #

如果你的页面依赖响应式布局做适配，可以监听媒体查询的变化，同时检查UA是否改动：

const initialUA = window.navigator.userAgent;
// 示例：监听移动端视口的媒体查询
const mobileQuery = window.matchMedia('(max-width: 768px)');

function checkUAAndRefresh() {
  const currentUA = window.navigator.userAgent;
  if (currentUA !== initialUA) {
    window.location.reload();
  }
}

// 首次加载时检查
checkUAAndRefresh();
// 媒体查询变化时触发检查
mobileQuery.addEventListener('change', checkUAAndRefresh);

这种方式适合本身就用响应式布局的场景，能减少不必要的定时轮询。

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