ios safari 100vh

biage / 2023-05-16 / 原文

/**
 * ios safari 100vh(整个页面的vh全部改为以下写法才生效)
 * 1、全局css增加 :root
 * 2、onMounted中调用safariHacks方法
 * 
 *  max-height: 80vh;
 *  max-height: calc(var(--vh) * 80);
 *  或者
 *  height: calc(100vh - 132rpx);
 *  height: calc(var(--vh, 1vh) * 100 - 132rpx);
 * 
 */


1、
:root {
  --vh: 1vh;
}

2、

function setCorrectViewHeight () {
  // #ifdef H5
  const windowsVH = window.innerHeight / 100
  document.documentElement.style.setProperty('--vh', windowsVH + 'px')
  // #endif
}

export const safariHacks = () => {
  // #ifdef H5
  setCorrectViewHeight()
  // window.addEventListener('load', setCorrectViewHeight)
  window.addEventListener('resize', setCorrectViewHeight)
  // #endif
}