关于 Safari 100vh 的问题与解决方案

前言

理论上100vh=当前视口可见高度，但是safari浏览器100vh并不等于当前视口可见高度。所以问题就出现了，需要解决。

解决办法

如果只是100vh的情况，可以使用100%解决。这个不需要过多说明。

如果需要在任意位置使用Xvh的情况，可以通过js计算出来1vh的大小,然后赋值给css全局变量。

声明css全局变量

<style>
  :root {
    --vh: 1vh;
  }
</style>

给css全局变量赋值

<script>
  !(function (n, e) {
    function setViewHeight() {
      var windowVH = e.innerHeight / 100
      n.documentElement.style.setProperty('--vh', windowVH + 'px')
    }
    var i = 'orientationchange' in window ? 'orientationchange' : 'resize'
    n.addEventListener('DOMContentLoaded', setViewHeight)
    e.addEventListener(i, setViewHeight)
  })(document, window)
</script>

使用css全局变量

<style lang="less">
  .ele {
      height: calc(~"var(--vh) * 100 - 80px")
  }
</style>

当然也可以通过使用postcss配置：

module.exports = { 
    plugins: [ require('postcss-100vh-fix') ] 
}

注意性能

追加

如果不想使用vh，可以使用100%去实现，这种方案我个人觉得更好。

后语

谢谢阅读！