为什么Chromium浏览器新标签打开链接时window.outerWidth返回0？

测试文件1：test.html #

<a href="test2.html">Click</a>

测试文件2：test2.html #

<script>
    alert(window.outerWidth);
</script>

• 左键点击链接在当前标签页打开时，window.outerWidth 返回正常的浏览器窗口宽度
• 鼠标中键点击（后台新标签页打开）、右键菜单选择新标签页打开时，window.outerWidth 返回值为 0
• 该问题仅出现在 Chromium 内核浏览器（Chrome、Edge、Opera 等），Firefox 浏览器无此问题

这是 Chromium 内核的原生设计逻辑：后台加载的标签页在用户主动激活前，不会被分配实际的窗口渲染尺寸，此时直接读取 window.outerWidth、window.outerHeight 这类窗口级尺寸属性，都会拿到初始值 0。
Firefox 内核在后台标签初始化阶段就会同步当前浏览器窗口的尺寸参数给新标签，因此不会触发该问题。

如果需要在页面加载阶段可靠获取窗口尺寸，推荐通过监听标签页可见性变化的方式实现：

function getValidOuterWidth() {
  // 当前标签页处于激活状态，直接读取
  if (!document.hidden) {
    return window.outerWidth;
  }
  // 标签页在后台，监听激活后再读取
  return new Promise(resolve => {
    const onVisibilityChange = () => {
      if (!document.hidden) {
        document.removeEventListener('visibilitychange', onVisibilityChange);
        resolve(window.outerWidth);
      }
    };
    document.addEventListener('visibilitychange', onVisibilityChange);
  });
}

// 调用示例
window.addEventListener('pageshow', async () => {
  const width = await getValidOuterWidth();
  alert(width);
});

如果对读取时机要求不高，也可以在页面加载完成后延迟100-200ms读取，该方案实现简单但极端场景下存在失效可能：

window.addEventListener('load', () => {
  setTimeout(() => {
    alert(window.outerWidth);
  }, 200);
});

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