svh视口单位在移动端内嵌浏览器（Google搜索/Instagram）失效问题

我需要给着陆页首屏hero区域使用SVH视口单位，标准移动端浏览器里表现正常，但在Google搜索、Instagram这类内嵌浏览器中，SVH和DVH表现一致，滚动页面时会出现卡顿跳转。目标是实现首屏完整显示（这是使用SVH的初衷），同时避免尺寸随浏览器元素变化（像DVH那样）。另外想知道这是不是浏览器渲染引擎的bug？之前移动端Safari也出过类似视口单位异常的问题。我们已经试过标准VH单位，相关代码如下：

HTML片段 #

<body data-new-gr-c-s-check-loaded="14.1196.0" cata-ar-ext-installeos == $0>
    <header>...</header>
    <section class="hero">...</section>
    <section class="calculator" id="calculator" data-controller="home-page">...</section>
</body>

CSS片段 #

@media screen and (max-width: 767px) {
    .hero {
        height: 100svh;  
        max-height: 100vh;  
    }
}

1. JavaScript动态计算固定视口高度 #

内嵌浏览器对SVH的实现普遍不标准，直接通过JS获取真实可视区域高度并设置为固定值，完全避免视口单位的兼容性问题：

function setHeroHeight() {
    const hero = document.querySelector('.hero');
    if (!hero) return;
    // 获取不含动态浏览器UI的可视区域高度
    const viewportHeight = window.innerHeight;
    hero.style.height = `${viewportHeight}px`;
}

// 页面加载完成后设置高度
window.addEventListener('load', setHeroHeight);
// 若需适配窗口旋转，可添加resize监听（按需启用）
// window.addEventListener('resize', setHeroHeight);

该方法用固定px值锁定hero高度，不会随浏览器UI变化跳动，确保首屏完整显示。

2. CSS降级：结合VH与安全区域修正 #

如果不想依赖JS，可尝试用VH结合安全区域变量做修正（仅适合对兼容性要求较低的场景）：

@media screen and (max-width: 767px) {
    .hero {
        /* 针对不同内嵌浏览器可能需要微调数值 */
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}

注意：env()需要浏览器支持，部分老旧内嵌浏览器可能不生效。

3. 极端场景：禁用页面滚动 #

如果卡顿跳转是因为内嵌浏览器滚动触发UI变化，且首屏无需滚动，可直接锁定页面：

body {
    overflow: hidden;
}
.hero {
    height: 100vh;
}

这不属于标准浏览器引擎的bug，而是内嵌浏览器对CSS视口单位的实现不规范。Google搜索WebView、Instagram内置浏览器这类内嵌环境，通常基于Chromium或WebKit，但会自定义浏览器UI和视口逻辑，错误地将SVH（本应取最小视口高度，不含动态UI）实现为DVH的动态视口逻辑，导致滚动时尺寸随UI变化。

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