Chrome for Android 升级至 116 版本后，因视口调整行为变更（resize 事件触发逻辑更新），导致使用 position: fixed 的全屏 React 应用意外出现垂直滚动条；根本解决方法是通过新增 viewport 元标签启用兼容性模式。
chrome for android 升级至 116 版本后，因视口调整行为变更（`resize` 事件触发逻辑更新），导致使用 `position: fixed` 的全屏 react 应用意外出现垂直滚动条；根本解决方法是通过新增 viewport 元标签启用兼容性模式。
自 Chrome for Android 116 起，浏览器对 的解析引入了新的 viewport resize 行为：当软键盘弹出、地址栏收起/展开等 UI 变化发生时，visual viewport 与 layout viewport 的尺寸计算方式发生改变，尤其影响 position: fixed 元素的定位基准。此前（如 v99）中，fixed 元素默认锚定在“视觉视口”（visual viewport）顶部；而新版默认锚定在“布局视口”（layout viewport）——后者在键盘弹出时会收缩，导致 fixed 元素被“顶出”可见区域，浏览器为保障可访问性自动添加滚动容器，从而出现非预期的滚动条。
仅靠 CSS 的 overflow: hidden 或 scroll-behavior 无法根治此问题，因为滚动行为源于视口尺寸重算后的布局重排，而非内容溢出。
✅ 正确解决方案是在项目入口 HTML 文件（通常是 public/index.html）的
中添加以下 meta 标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
该 interactive-widget=resizes-content 属性明确告知 Chrome：当交互式组件（如软键盘）出现时，应调整 layout viewport 尺寸以保持内容区域稳定，同时让 position: fixed 元素继续相对于 visual viewport 定位——这与旧版行为一致，从而消除异常滚动。
YZTurboWebAndroid 高性能 Android WebView 容器 SDK 接入。用于在 Android 项目中集成 WebView 容器，实现： (1) WebView 预加载与复用，提升 H5 页面加载速度 (2) 离线包管理，拦截请求优先命中本地资源 (3) JS Bridge 双向通信，Na...
⚠️ 注意事项：
- 此属性仅在 Chrome for Android ≥116 中生效，其他浏览器或旧版 Chrome 会安全忽略；
- 若应用中存在多个 position: fixed 全屏组件（如导航栏、模态框、底部操作栏），需确保其 top/bottom 值与视口变化逻辑兼容；
- 不建议移除 viewport 标签原有属性（如 width=device-width），应采用追加方式；
- 开发调试时，可在 Chrome DevTools 的 Rendering → Emulate visual viewport 中模拟键盘弹出场景验证效果。
? 补充建议：对于高度依赖 fixed 布局的 React SPA（如 PWA 或游戏类应用），还可结合 JavaScript 监听 visualViewport API 做细粒度适配：
if ('visualViewport' in window) {
const handleResize = () => {
document.documentElement.style.setProperty(
'--vh', `${window.visualViewport.height * 0.01}px`
);
};
window.visualViewport.addEventListener('resize', handleResize);
handleResize(); // 初始化
}
然后在 CSS 中使用 height: calc(var(--vh, 1vh) * 100) 替代 100vh，进一步提升响应鲁棒性。
综上，这不是 React 或 CSS 的 Bug，而是浏览器平台演进带来的兼容性适配需求。添加指定 viewport 指令是最轻量、最标准的修复方式。
