ios safari 100vh 값 오류

참고 출처를 밝힌다

• https://velog.io/@devcmkim/IOS-%EB%85%B8%EC%B9%98%EB%8C%80%EC%9D%91-Css
• https://trend21c.tistory.com/2236
• https://abcdqbbq.tistory.com/92
• https://velog.io/@wor0927/%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%801-%EC%95%84%EC%9D%B4%ED%8F%B0-%EB%85%B8%EC%B9%98Safe-area%EC%98%81%EC%97%AD

" ios가 정말 싫다... -아이폰 유저- "

하이브리드 웹앱의 퍼블리싱을 하고 있는데, 대부분의 문제가 ios에서 발생한다. 그것도 safari. 그래서 나는 다음 핸드폰은 꼭 안드로이드로 돌아가야겠다고 생각했다...
화면을 넓게 쓰고 싶으면... 컴퓨터를 하자고...

아래로는 해결할때 썼던 것들을 정리한다

html

<meta name="viewport" content="inital-scale=1, viewport-fit=cover">

css

/* iOS 11.0 버전 */
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

/* iOS 11.2 이상 */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

/*env 함수는 fallback값을 설정할수 있어서 해당 환경변수가 존재하지 않을때의 기본값의 설정이 가능*/

/* iOS only */
@supports (-webkit-touch-callout: none) { 
  height: -webkit-fill-available;  //크롬에서안될 상황 대비 ios 노치 대응
}

html{
  height: -webkit-fill-available;
  /* 익스플로러 IE 10 확대 제어 */
  -ms-content-zooming: none;
  -ms-touch-action: pan-x pan-y;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom, 0px);
 
}

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");
    });
    
    // height: calc(var(--vh, 1vh) * 100); css에 이런 식으로 작성된다.

env를 적용하지 않으면 전면 스피커, 카메라가 있는 부분까지 영역으로 잡기 때문에 넣어주는 편이 좋다.

유저가 확대하는 것 자체를 막는건 UI적으로 그리 좋지 않다고 생각되기때문에 작성하지 않았다.

-webkit-touch-callout 에 관해선 여기 를 참고했다.
비표준 방식이고 ios safari에서만 사용되는 css 인것 같은데... 좀 더 알아봐야겠다.

이러한 기본 작업들을 해놨는데도 불구하고 safari 하단 주소창이 올라오면 fixed 영역처렴 가려졌는데, 해당 이슈가 발생한다면 부모 높이를 100vh로 주지 않았나 살펴보고 auto로 바꿔보자. 동작이 스무스하지는 않지만 하단부가 가려지는 것보단 낫다.