[사파리] 노치, 홈 네비게이터바 해결 방법
React 웹뷰로 기능을 만들다보니 디자인적으로 어려운참 많다. 특히나 IOS 와 안드로이드를 동시에 해결하려고 하다보니 보통은 안드로이드 기준에서는 잘되는데 IOS 에서는 안되는 경우가 너무나도 많았다. (그지 같은 사파리..)이번에도 IOS 에서만 이상하게 동작하는 문제였는데 IOS 에서는 노치와 홈 네비게이터바 라는 개념이 있다. 노치는 화면 상단에 와이파이나 시간 개념처럼 나오는 상태창을 의미하고, 홈 네비게이터바는 하단에 바처럼 생긴 부분이고 핸드폰으로 보면 라운딩된 부분이다. 보통 화면 전체 크기를 잡을 때 height:'calc(var(--vh, 1vh) * 100)',이런식으로 잡기 마련인데.. 문제는 사파리 웹뷰의 경우는 노치와 홈 네비게이터 바까지 영역이 침범해서 문제가 발생한다. 원래..
