关于 100vh 和 100% 高度的一点对比

说一下出现这个问题的场景, 在 ios 15.0 场景下 100% 高度在手机滑动之后, 底部会出现空白(这大概率是 ios 15.0 的一个 bug)
验证地址 : https://vant-demo.wulicode.com/misc/height

因为 vConsole 工具也出现了这个问题

因为页面的底部出现了空白, 参见 1 图第一个屏幕的默认样式, 在这种情况下存在的一个 bug, 这种样式来源于 vue 默认框架中对于高度的定义

html, body{
    height: 100%
}

#app{
    height:100%
}

如果要解决这个系统的 bug 则可以通过对这个系统进行适配
App.vue

<script lang="ts" setup>
import UAParser from "ua-parser-js";
import { onMounted } from "vue";

let ua = new UAParser(navigator.userAgent)
onMounted(() => {
    if (ua.getOS().name === 'iOS' && ua.getOS().version === '15.0') {
        if (document.documentElement.hasAttribute('fix-height')) {
            document.documentElement.removeAttribute('fix-height');
        }
        document.documentElement.setAttribute('fix-height', 'vh');
    }
})
</script>

fix.less

:root {
    --wr-app-height: 100%;
}

:root[fix-height="vh"] {
    --wr-app-height: 100vh;
}

但是这种情况下在项目中并非最优解, 因为在固定高度为 100% 的定义中损失了 ios 上划缩小地址栏和菜单栏的特性, 导致可访问区域变小

下图是在 ios 模拟器中上划之后的 app 可访问区域, 是比较完美的一个高度设定
在以上这种情况下加入关掉了 body 的 100% 则会出现如下结果, 其他情况下的高度需要另行适配

---

语雀镜像 : 关于 100vh 和 100% 高度的一点对比 ,点此 提问