$window.innerHeight在Chrome与Firefox中返回值不一致问题咨询

Hey there! 这个问题我之前确实碰到过，折腾了好一阵才捋清楚背后的原因，下面跟你唠唠：

为什么会出现像素差异？ #

• 浏览器UI计算逻辑不同：Chrome和Firefox对顶部工具栏、标签栏这类浏览器原生UI的高度计算方式有细微差别，尤其是当你调整了浏览器的布局（比如Chrome展开/折叠书签栏、Firefox自定义工具栏）时，这种几像素的偏差会更明显。
• API本身的定义差异：虽然window.innerHeight和document.documentElement.clientHeight看起来功能相近，但本质上还是有区别：
  • window.innerHeight会包含垂直滚动条的高度（如果页面出现滚动条），而document.documentElement.clientHeight不包含。偏偏不同浏览器的滚动条渲染高度也可能有差异，这就进一步放大了数值差。
  • 浏览器的缩放比例也会搞事情——如果不是100%缩放，部分浏览器的像素计算会出现舍入误差，导致几像素的不同。

怎么解决这个问题？ #

• 取兼容值：如果需要尽可能统一的结果，可以尝试取两个API返回值的最小或最大值，适配不同场景：

  // 取较小值，适配不包含滚动条的场景
  const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
  // 或者取较大值，包含滚动条的场景
  // const viewportHeight = Math.max(window.innerHeight, document.documentElement.clientHeight);
  

• 使用视觉视口API：window.visualViewport.height是专门针对用户实际可见区域的API，现代浏览器（包括桌面端和移动端）都支持，它的计算逻辑更精准，能减少跨浏览器的差异：

  const viewportHeight = window.visualViewport?.height || window.innerHeight;
  

• 统一浏览器状态：尽量让浏览器处于默认UI布局（比如关闭额外工具栏、折叠书签栏），这种情况下差异会缩小到可以忽略的程度。其实大多数场景下，几像素的差异不会影响响应式布局的效果，毕竟响应式本身就是要适配一定的范围。

另外也可以检查下页面的默认样式，比如html或body标签的margin/padding是否被重置，有时候这些默认样式也会间接影响视口高度的计算结果哦。

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