js/css - 아이폰 사파리&크롬에서 100vh가 하단 툴바랑 주소창때문에 제대로 적용 안되는 현상

안드로이드는 잘 됨

아이폰에서 사파리, 크롬 100vh가 제대로 적용 안될 때

 

css에서

.somediv{height:calc(var(--vh, 1vh) * 100);} /* 100이면 100vh */

---

 

js에서

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', vh+"px");
// resize
window.addEventListener("resize", ()=>{
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', vh+"px");
})

---

모바일웹 전체 메뉴일 때.

참고 : 아이폰 브라우저(사파리, 크롬)에서 100vh가 제대로 적용이 안되고 밑에 있는 컨텐츠 영역이 스크롤 될 때, 툴바랑 주소창 상관없이 꽉차게 보여지고 컨텐츠 영역이 스크롤 안 되는 것처럼 보이게.

html.ovhi,
body.ovhi{position:relative;overflow:hidden!important;touch-action:none;}
.somediv{height:calc(var(--vh, 1vh) * 100);}

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', vh+"px");
// resize
window.addEventListener("resize", ()=>{
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', vh+"px");
})

///////////////////////////////////////////////////
const menuOn = () => {
    if(menu.flag){
      menu.flag = false;

      // 전체 메뉴 닫을 때 고정된 높이 값 없애기
      document.body.removeAttribute("style");
      document.documentElement.removeAttribute("style");

      // 컨텐츠 영역의 스크롤 값을 전체 메뉴 열기 전 높이 값으로 세팅
      document.documentElement.scrollTop = menu.lastHeight;

      // 컨텐츠 영역이 스크롤 되도록 html, body에서 class 제거
      document.body.classList.remove("ovhi");
      document.documentElement.classList.remove("ovhi");

      // 아이폰 툴바랑 주소창 영역에 맞게 100vh를 다시 세팅
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }else{
      menu.flag = true;

      // 아이폰에서 전체 메뉴 시 컨텐츠 스크롤 위치 값 저장
      menu.lastHeight = document.documentElement.scrollTop;

      // 컨텐츠 영역이 스크롤 안되게 html, body에 class 추가
      document.body.classList.add("ovhi");
      document.documentElement.classList.add("ovhi");

      // 전체 메뉴가 열리고 난 후(400s) 높이 값을 화면 크기 만큼만 쥐서 위아래로 touchmove해도 툴바랑 주소창 고정된 상태로 보여지게.
      // 컨텐츠 영역의 스크롤 높이 값은 0이 됨.
      setTimeout(() => {
        document.body.setAttribute("style", "height:calc(var(--vh, 1vh) * 100)");
      }, 390);
    }
}