iPhone端Chrome浏览器中svh/lvh单位无法正常工作的问题求助

原因 #

iOS上的Chrome基于WebKit内核，但对svh（smallest viewport height）的实现存在异常：当滚动触发底部导航栏显示/隐藏时，浏览器会错误地将svh的计算逻辑和dvh（dynamic viewport height）混淆，导致视口高度随导航栏状态动态变化，进而触发hero区域尺寸改变、页面元素移位。而Safari对svh的实现更贴合标准，会固定取导航栏显示时的最小视口高度，不会随滚动调整。

解决方案 #

1. 替换为lvh单位（适合固定最大视口高度需求）

如果你的需求是让hero始终占满导航栏隐藏时的最大视口高度，直接用lvh替代svh即可。lvh（largest viewport height）会固定取导航栏隐藏时的视口高度，即使滚动时导航栏出现，hero高度也保持不变，彻底避免移位问题。

修改后的MUI Box代码：

<Box
  sx={{
    width: '100%', // 用100%替代vw，避免横向滚动问题
    height: '100lvh',
    position: 'relative',
  }}
>

2. 多单位回退方案（兼容全环境）

如果需要同时适配不同浏览器的特性，组合使用多个高度单位做渐进式回退，覆盖iOS Chrome的异常行为：

<Box
  sx={{
    width: '100%',
    // 渐进式回退：旧浏览器 -> 现代动态视口 -> iOS WebKit适配
    height: '100vh',
    height: '100dvh',
    height: '-webkit-fill-available',
    position: 'relative',
  }}
>

各单位作用：

• 100vh：为不支持新视口单位的旧浏览器提供基础适配；
• 100dvh：适配支持动态视口单位的现代浏览器，会实时跟随视口高度变化（若需要动态调整）；
• -webkit-fill-available：专门修复iOS上Chrome等WebKit内核浏览器的滚动跳变问题，强制占满当前可用视口高度。

3. JavaScript兜底方案（极端场景）

若上述CSS方案仍无效，可通过JS固定hero的初始视口高度，避免滚动时的尺寸变化：

const heroBox = document.querySelector('.your-hero-class');
const setHeroHeight = () => {
  heroBox.style.height = `${window.innerHeight}px`;
};

// 页面加载时设置高度
window.addEventListener('load', setHeroHeight);
// 可选：监听窗口 resize（比如屏幕旋转）时重新设置
window.addEventListener('resize', setHeroHeight);

注意：此方案会让hero高度固定为初始值，若需支持屏幕旋转等场景，需额外添加对应事件监听。

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