ios safari浏览器100vh问题记录

safari浏览器会把地址栏的高度也算在里面，在跳转到用100vh计算的页面时可能会出现遮挡的问题；

解决办法：重新定义vh

:root {
  --vh: 1vh;
}

// 动态设置viewport的vh值

    !(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)

使用：

height: calc(100vh - 1.75rem);

height: calc(var(--vh) * 100 - 1.75rem);