移动端Chrome窗口尺寸异常：直接输入URL时innerHeight不符

根因分析 #

这是Chrome for Android在直接地址栏输入URL启动页面时的特定渲染机制导致的：

• 直接输入URL跳转时，Chrome会先以「忽略浏览器UI占位」的初始视图状态渲染页面，此时window.innerHeight返回的是屏幕扣除系统状态栏后的纯物理可用高度（也就是你看到的1101），还没计算地址栏、底部导航栏的高度占用。
• 而扫码、点击链接打开页面时，Chrome是从已有会话或预设视图上下文启动，会直接应用实际的UI布局规则，所以初始innerHeight就是扣除浏览器UI后的正常数值（775）。

交互后恢复正常的原因 #

当你进行刷新、点击等用户交互后，Chrome会重新校准页面视口尺寸，应用实际的浏览器UI高度计算，所以innerHeight会修正为775；滚动时地址栏隐藏，浏览器UI占用高度减少，视口高度随之增加到831，这是Chrome地址栏动态收缩的正常行为。

解决办法 #

如果需要在页面加载时获取准确的视口高度，推荐使用visualViewport API，它能实时反映当前可见视口的实际大小，不受初始渲染的异常状态影响：

// 监听视口变化，实时获取准确高度
window.visualViewport.addEventListener('resize', () => {
  console.log('当前准确视口高度:', window.visualViewport.height);
});

// 初始加载时可延迟获取，避开初始渲染的异常阶段
setTimeout(() => {
  console.log('初始准确视口高度:', window.visualViewport.height);
}, 100);

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