아이폰 safe area 영역 대응 env(safe-area-inset-*)
이번 새로운 프로젝트는 하이브리드 웹앱을 진행하였다 근데 앱 배포하면서 IOS safe area 대응해야 하는 문제에 직면했다. IOS에서는 safe area 영역을 디바이스 화면으로 잡기 때문에 top: 0, bottom: 0으로 fixed로 고정해줬을 때 올바르게 적용이 되지 않는 문제가 발생하였고 100vh가 제대로 먹히지 않는 문제가 발생하였다. 가장 큰 문제점 --vh 미적용 모바일 브라우저에서 URL 입력 영역과 하단 네비게이션 영역의 사이즈를 포함하고 있어 100vh를 했을 경우 스크롤이 생기는 현상을 해결하기 위해 --vh라는 속성을 자바스크립트로 계산하여 디바이스의 1/100 값으로 지정해줄 수 있다. 이렇게하면 100vh가 모바일 브라우저 환경마다 딱 맞게 된다 2. 해결 방안 총 3번..
개발
2023. 7. 7. 13:22
