React Web端如何获取不受键盘影响的固定屏幕高度？

以下是几种可靠的方案，能帮你获取不受软键盘弹出影响的固定屏幕高度：

方案1：直接使用物理屏幕高度（screen.height） #

screen.height 返回设备物理屏幕的垂直高度，完全不受软键盘、状态栏等UI元素的影响，是最稳定的固定值。如果需要和CSS逻辑像素匹配，可以结合设备像素比转换：

// 获取物理像素高度
const physicalScreenHeight = screen.height;
// 转换为CSS逻辑像素高度
const logicalScreenHeight = physicalScreenHeight / window.devicePixelRatio;

方案2：缓存页面初始加载时的可用高度 #

页面刚加载完成时，软键盘通常处于收起状态，此时获取的 window.innerHeight 就是当前屏幕方向下的可用高度。将这个值缓存下来，后续直接使用即可：

let fixedScreenHeight;

// 页面加载完成时缓存高度
window.addEventListener('load', () => {
  fixedScreenHeight = window.innerHeight;
});

// 监听横竖屏切换，更新缓存高度
window.addEventListener('orientationchange', () => {
  fixedScreenHeight = window.innerHeight;
});

// 后续需要时直接调用fixedScreenHeight
// console.log(fixedScreenHeight);

方案3：区分系统状态栏的可用高度（可选） #

如果需要排除系统状态栏的高度（仅保留应用可使用的屏幕高度），可以在页面初始加载时结合 screen.availHeight（部分设备适用）：

const appAvailableHeight = screen.availHeight / window.devicePixelRatio;

注意事项 #

• screen.height 在横竖屏切换时会自动对应当前方向的物理高度，无需额外处理；
• 缓存初始高度的方法要避免页面加载时自动聚焦输入框的情况（此时键盘会弹出，初始高度会被错误覆盖），如果有自动聚焦逻辑，建议先获取高度再触发聚焦；
• 部分Android设备的 window.innerHeight 在键盘弹出时会被压缩，但 screen.height 始终保持物理屏幕高度不变。

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