使用100vh 在safari出现高度溢出问题与修复/ 100vh problem with ios safari

问题场景：制作适应页面满屏高度且不能超出与产生滚动条的页面在手机模拟器正常

在mobile safari & chrome 浏览器器出现高度溢出，产生滚动条

我们的真实想要（右图），但是实际上safari表现的100vh包含了地址栏头部+内容+底部功能菜单

.section {  
    height: 100vh;
}

以下有三个解决方案，第一个需要js & css配合使用, 第二与第三个只需css，需要注意的是第三个兼容性不是很好

1. JS & CSS

js部分：

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

执行appHeigh函数，根据当前屏幕可视区域高度设置css变量--app-height

css 部分：

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

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

以上代码我们通过var(--app-height)获取js修改变量的值

2. 使用 --webkit-fill-available

<style>
    body {
        height: 100vh;
        height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
    }
</style>
<body>
</body>

然而安卓chrome是不支持-webkit-fill-available属性的，这时我们利用@support与-webkit-touch-callout只针对safari设置

body {
    height: 100vh;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
}
@supports (-webkit-touch-callout: none) {
    body
      height: -webkit-fill-available;
    }
}

3. 使用dvh

知识补充： vw 和 vh 单位是我们都比较熟悉的两个单位，100vw 和 100vh 代表着视图窗口的宽和高

然而为了处理我们遇到100vh 包含地址栏、操作栏的问题，出现了两个新单位 svh、lvh

s 就是 small 的缩写

l 就是 large 的缩写

100 svh 将不会有溢出的情况！

除了 svh 还有另外一个更神的新单位：dvh，这个 d 是 dynamic 的缩写，它是动态的

只不过 svh 和 dvh 的支持还没有特别的好

谢谢你的观看，方便在评论下方留言跟我一起讨论