Skip to content

GitLab

Closed
Created by JayChen@JayChenOwner

ios safari 不同版本对于 vh这个单位具备不同的度量方案

背景

通常，我们设置 100vh，是代表页面高度是 视口撑满。
无论是在微信浏览器，chrome 浏览器，还是我们RN/app 内嵌webview里 100vh 就等于 window.innerHeight。 但一些版本的safari浏览器则不然。他所计算的100vh，是 window.innerHeight + ui组件栏。也就是说 100vh 是大于 window.innerHeight的。

解决方案

在项目初始插入 计算vh，代码如下

app.tsx

useEffect(() => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}, []);

使用方文件 xx.less

height: 100vh 应该换成如下写法

height: calc(var(--vh, 1vh) * 100 - constant(safe-area-inset-bottom));
height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom));
Edited by JayChen