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

说一下出现这个问题的场景, 在 ios 15.0 场景下 100% 高度在手机滑动之后, 底部会出现空白(这大概率是 ios 15.0 的一个 bug)
验证地址 : https://vant-demo.wulicode.com/misc/height
image.png
因为 vConsole 工具也出现了这个问题
image.png
因为页面的底部出现了空白, 参见 1 图第一个屏幕的默认样式, 在这种情况下存在的一个 bug, 这种样式来源于 vue 默认框架中对于高度的定义

1
2
3
4
5
6
7
html, body{
height: 100%
}

#app{
height:100%
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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

1
2
3
4
5
6
7
:root {
--wr-app-height: 100%;
}

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

image.png
但是这种情况下在项目中并非最优解, 因为在固定高度为 100% 的定义中损失了 ios 上划缩小地址栏和菜单栏的特性, 导致可访问区域变小
image.png
下图是在 ios 模拟器中上划之后的 app 可访问区域, 是比较完美的一个高度设定
在以上这种情况下加入关掉了 body 的 100% 则会出现如下结果, 其他情况下的高度需要另行适配
image.png


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

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

https://wulicode.com/web/xy5stvp0q3x1gtv6.html

作者

Duoli

发布于

2023-01-09

更新于

2023-01-10

许可协议

评论