如何获取不受开发者工具影响的真实浏览器视口尺寸？

1. 存储页面加载时的初始视口基准 #

页面首次加载时，开发者工具默认处于关闭状态，此时获取的window.innerWidth和window.innerHeight就是无干扰的真实可用视口尺寸。把这两个值存为全局基准值：

document.addEventListener('DOMContentLoaded', () => {
  window.originalViewport = {
    width: window.innerWidth,
    height: window.innerHeight
  };
  // 初始化目标div尺寸
  const targetDiv = document.querySelector('#your-target-div');
  targetDiv.style.width = `${window.originalViewport.width}px`;
  targetDiv.style.height = `${window.originalViewport.height}px`;
});

2. 智能处理窗口 resize 事件 #

监听窗口尺寸变化，但只在符合特定条件时更新div尺寸，排除开发者工具打开导致的视口缩小：

window.addEventListener('resize', () => {
  const currentW = window.innerWidth;
  const currentH = window.innerHeight;
  const original = window.originalViewport;
  const targetDiv = document.querySelector('#your-target-div');

  // 判断是否是开发者工具关闭后的视口恢复（阈值设为10px，可按需调整）
  const isRestored = Math.abs(currentW - original.width) <= 10 && Math.abs(currentH - original.height) <= 10;
  
  if (isRestored) {
    // 强制恢复到初始真实尺寸
    targetDiv.style.width = `${original.width}px`;
    targetDiv.style.height = `${original.height}px`;
  } else if (currentW >= original.width && currentH >= original.height) {
    // 用户主动放大浏览器窗口时，更新基准值并调整div
    window.originalViewport = { width: currentW, height: currentH };
    targetDiv.style.width = `${currentW}px`;
    targetDiv.style.height = `${currentH}px`;
  }
  // 视口小于基准值时不处理，排除开发者工具打开的场景
});

3. Pug模板端的配合 #

在Pug里不要给目标div写死固定尺寸，留空让JS动态设置：

div#your-target-div
  // 你的div内容

核心逻辑说明 #

• 页面加载时的初始视口值是最可靠的无干扰数据，因为此时开发者工具未开启，innerWidth/innerHeight就是用户真实的可用视口（不会出现滚动条）。
• 通过阈值判断过滤开发者工具打开/关闭的干扰，只在用户主动调整窗口或恢复视口时更新div尺寸。
• 避免了outerWidth/outerHeight带来的滚动条问题，完全符合需求。

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