如何获取精确到小数点的浏览器窗口高度值

可行方案（无需额外添加CSS样式） #

方案1：使用 Visual Viewport API（优先推荐）

直接调用 window.visualViewport.height 即可获取精确到小数点的视口高度，该API专门用于返回浏览器可视窗口的精确参数，返回值本身就是浮点型，无需任何额外配置。

兼容性覆盖所有主流现代浏览器（Chrome 61+、Firefox 91+、Safari 13+），无旧版本兼容需求时首选该方案。

方案2：使用根元素的getBoundingClientRect

直接获取<html>根元素的尺寸即可，不需要修改body相关样式：

const preciseViewportHeight = document.documentElement.getBoundingClientRect().height

根元素默认铺满整个视口，返回的height值本身就是浮点精度的视口高度。

补充说明 #

window.innerHeight 按照W3C规范定义，返回值是四舍五入后的整数CSS像素值，所以原生就不支持返回浮点精度结果。

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