如何精确设置window.innerWidth/innerHeight为设备像素尺寸

问题根因 #

你当前的代码存在核心错误，是导致尺寸不匹配的根本原因：

• window.innerWidth 和 window.innerHeight 是只读属性，直接对这两个属性赋值不会产生任何实际效果，你观测到的尺寸变化和这两行赋值代码没有关系。
• 浏览器仅提供了调整窗口整体外边框尺寸的API window.resizeTo()，这个API设置的尺寸包含了系统窗口边框、标题栏、浏览器自身UI（标签栏、地址栏、书签栏、侧边栏等）的占位，并非你需要的内容视口尺寸，直接用目标设备像素除以DPR传入必然存在偏差。
• 额外影响：window.devicePixelRatio 是动态值，会随页面缩放、系统显示缩放变化，单次取值计算容易出现精度误差；部分系统和浏览器会对窗口尺寸做整数对齐，一次性计算很难做到像素级精确。

前置限制说明 #

window.resizeTo 存在浏览器安全策略限制：仅对脚本通过 window.open() 创建的独立弹窗窗口生效，用户手动打开的普通标签页、合并了多标签的浏览器窗口，会直接拦截脚本的窗口调整请求，没有任何方案可以绕过这个限制。

精确实现方案 #

通过短循环校准的方式消除UI占位、取整带来的偏差：每次调整后重新读取当前视口的实际设备像素尺寸，和目标值比对后计算差值补调，一般2-3次校准即可达到像素级精确。

// 仅对window.open创建的独立弹窗生效
async function setViewportDevicePixelSize(targetDprWidth, targetDprHeight) {
  const maxRetry = 5; // 最多校准5次，避免死循环
  for (let i = 0; i < maxRetry; i++) {
    const currentDpr = window.devicePixelRatio;
    // 读取当前视口实际设备像素尺寸
    const currentWidth = Math.round(window.innerWidth * currentDpr);
    const currentHeight = Math.round(window.innerHeight * currentDpr);
    // 尺寸匹配直接返回
    if (currentWidth === targetDprWidth && currentHeight === targetDprHeight) return true;
    // 计算浏览器UI、系统窗口边框的占位尺寸（CSS像素）
    const chromeOffsetW = window.outerWidth - window.innerWidth;
    const chromeOffsetH = window.outerHeight - window.innerHeight;
    // 换算目标视口对应的CSS像素尺寸，叠加Chrome占位后设置窗口总尺寸
    window.resizeTo(
      targetDprWidth / currentDpr + chromeOffsetW,
      targetDprHeight / currentDpr + chromeOffsetH
    );
    // 等待浏览器完成窗口重绘再进入下一轮校准
    await new Promise(resolve => requestAnimationFrame(resolve));
  }
  return false; // 超出校准次数仍未匹配，通常是触发了系统窗口尺寸限制
}

// 替换你原有的resize事件逻辑
window.addEventListener("resize", function() {
  if (window.confirm("Do you want to change this window's inner Size?")) {
    const inputWidth = Number(window.prompt("Width (device pixel):"));
    const inputHeight = Number(window.prompt("Height (device pixel):"));
    if (!Number.isFinite(inputWidth) || !Number.isFinite(inputHeight) || inputWidth <= 0 || inputHeight <= 0) {
      alert("Please enter valid positive numeric value");
      return;
    }
    setViewportDevicePixelSize(inputWidth, inputHeight);
  }
});

注意事项 #

• 测试时不要直接在普通标签页运行代码，可以先在控制台执行 const testWin = window.open('', '', 'width=200,height=200') 打开测试弹窗，将代码注入到弹窗上下文执行即可看到效果。
• 部分操作系统对窗口的最小/最大尺寸有强制限制（比如Windows系统窗口宽度最小约为136CSS像素），如果输入的目标尺寸触发系统限制，无法做到完全精确匹配。
• 校准逻辑会在每次循环时重新读取最新的DPR值，即使用户调整了页面缩放比例，依然可以准确匹配目标设备像素尺寸。

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