기본 콘텐츠로 건너뛰기

아이폰 사파리 100vh 가 제대로 적용이 안될 때 해결 방법 - css + javascript

이미지
작성자:

아이폰 사파리 브라우저에서 100vh가 제대로 적용 안되는 오류, 버그 해결

javascript 작성

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");
}

css에 적용

.someClass{height:calc(var(--vh, 1vh) * 100);} /* 100 => 100vh */

위와 같이 javascript로 1vh에 대한 기준 값을 정의하고, css에서 원하는 높이 만큼 vh를 작성하면 된다.

  • 아이폰 사파리에서 height:100vh 가 제대로 안나오는 이유는 툴바와 주소창이 스크롤 될때마다 자동으로 숨겨졌다 보였다해서 그렇다.
  • 안드로이드 폰에선 브라우저의 높이가 그대로 100vh이지만 아이폰에선 툴바와 주소창이 브라우저 높이와는 상관없이 그 위로 뜨는 것처럼 적용되어 실제 100vh에선 그 만큼 가려져서 보여지게 된다.

아이폰 사파리에서 화면 전체를 덮어버리는 메뉴 레이어가 보여질 때, 툴바랑 주소창에 상관없이 100vh로 꽉차게 보여지고 컨텐츠 영역이 위, 아래 터치무브에 영향을 안 받아서 메뉴 레이어를 닫으면 열렸던 컨텐츠의 위치 그대로 보여지게

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

...
...... javascript ...

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 menuShow = () => {
  if(menu.view){
    menu.view = false;

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

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

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

    // 아이폰 브라우저 영역에 맞게 100vh 기준값 초기화
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", vh+"px");
  }else{
    menu. = true;

    // 레이어팝업(전체 메뉴) 열 때 컨텐츠 스크롤 위치 값 저장
    menu.lastHeight = document.documentElement.scrollTop;

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

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

아이폰 브라우저가 안드로이드폰 브라우저 만큼 편해졌으면 좋겠습니다.


끝.



분류 :