移动端浏览器滚动时地址栏自动隐藏会导致 viewport 高度变化，使 scrollIntoView({ block: 'center' }) 失效；本文提供 CSS 重置 + viewport 优化的完整解决方案。
移动端浏览器滚动时地址栏自动隐藏会导致 viewport 高度变化，使 `scrollintoview({ block: 'center' })` 失效；本文提供 css 重置 + viewport 优化的完整解决方案。
在 Next.js（或其他 React）项目中调用 element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' }) 时，开发者常期望目标元素能精确垂直居中于视口中央。然而在 iOS Safari 和部分 Android 浏览器上，实际效果往往偏上或偏下——尤其在快速滚动后，元素明显偏离中心位置。
根本原因在于：移动端浏览器（尤其是 Safari）会动态隐藏/显示顶部地址栏与底部导航栏，导致 window.innerHeight 实时变化，而 scrollIntoView 的 block: 'center' 是基于当前瞬时 viewport 高度计算的。当用户滚动触发地址栏收起后，视口高度突然增加（例如从 600px → 680px），原本“居中”的滚动偏移量即刻失效，视觉上表现为元素“上浮”。
✅ 正确解法不是修改 JavaScript 逻辑，而是稳定 viewport 行为，从根源消除高度抖动：
1. 强制固定 HTML / Body 高度
在 app/globals.css（或 _document.tsx 对应的全局样式）中添加：
html,
body {
margin: 0;
height: 100%;
/* 关键：禁用默认缩放导致的布局偏移 */
overflow-x: hidden;
}⚠️ 注意：仅设 height: 100% 不够，必须确保父级（html）和根容器（body）均无边距、无滚动干扰，否则 100vh 在移动端仍可能被浏览器 UI 动态截断。
2. 精准配置 viewport 元标签
在 app/layout.tsx 的 metadata 中，显式声明 viewport 并禁用交互式缩放扰动：
export const metadata = {
title: "Your App",
description: "A responsive portfolio",
// ✅ 关键参数：锁定缩放 + 启用 visual resize（避免 layout shift）
viewport: {
width: 'device-width',
initialScale: 1.0,
maximumScale: 1.0,
interactiveWidget: 'resize-visual', // Safari 16.4+ 支持，防止地址栏隐藏时重排
}
};? interactiveWidget: 'resize-visual' 是 Safari 16.4+ 引入的关键特性，它指示浏览器：地址栏隐藏/显示时，不改变页面布局尺寸（即保持 100vh 稳定），仅调整视觉层（visual layer），从而让 scrollIntoView 的居中计算始终基于一致的视口基准。
3. JavaScript 调用保持简洁（无需降级兼容）
你的滚动逻辑无需修改，保留原生 API 即可：
const scrollToSection = (id: string) => {
closeDrawer(); // 如需关闭侧边栏等交互
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'center', // ✅ 现在真正居中
inline: 'center'
});
}
};补充建议
- 避免使用 100vh 布局容器：若页面中存在 height: 100vh 的 section，在旧版 Safari 中仍可能因地址栏隐藏而溢出。推荐改用 min-height: 100dvh（dynamic viewport height），现代浏览器支持良好；
- 测试验证：在真机 Safari 中开启「开发 → 远程自动化」，手动拖动地址栏观察 window.innerHeight 是否恒定；
- 渐进增强：对不支持 resize-visual 的老版本浏览器，可配合 @supports (interactive-widget: resize-visual) 做 CSS 回退。
通过以上三步——CSS 高度归一化、viewport 精准声明、JS 保持原生调用——即可彻底解决移动端 scrollIntoView 居中漂移问题，无需引入 react-scroll 等第三方库，轻量、可靠、符合 Web 标准。
