h5页面在Safari浏览器中高度适配问题

在开发H5时，页面高度设置100vh，使用Safari浏览器打开时底部导航会被遮挡，但在微信、app、及其他打开方式中显示正常

产生背景：（来源百度）

safari浏览器中height包括网址栏、功能列、wrap

解决方案（语言：react）

通过监听页面高度变化，设置window.innerHeight

代码总览

代码片段

1. 利用useRef

 const ref = useRef<HTMLDivElement>(null)

2. 在html中设置ref

<div className="root" ref={ref}>
...
</div>

3. 监听页面高度变化，触发resize方法

const resize = () => {
  if (ref.current) {
    ref.current.style.height = `${window.innerHeight}px`
  }
}

useEffect(() => {
  resize()
  window.addEventListener('resize', resize)
  return () => {
    window.removeEventListener('resize', resize)
  }
}, [])