아이폰 기기에서 하단 고정 nav 오류에 관한 질문입니다

Question

안녕하세요 앱을 하나 제작하는 프로젝트인데 모든 화면을 웹뷰로 제작했습니다. 저는 퍼블리셔고요​그 중 일종의 하단 nav 에서 문제가 발생했는데요​설명을 돕기 위해 아이폰 이미지를 구글링해서 이미지 편집을 해봤습니다. 우선 위와 같이 아이폰 중에 물리적으로 홈 버튼이 있는 기기는 모든 경우에서 문제가 없습니다. 이렇게 물리적인 홈 버튼이 없는 기기에서 문제가 발생합니다. 다만 이렇게 컨텐츠 양이 뷰의 높이보다 적은 경우는 문제가 없습니다. 하단 nav가 온전히 노출된 채로 잘 고정돼있습니다. 컨텐츠 양이 많아서 화면을 상하로 스크롤 해야될 때 문제가 생기는데요 진입하면 이렇게 하단 nav가 저 가로로 긴 막대? 노치부분이라고 하나요? 아이폰 유저가 아니라 명칭은 모르겠지만 아무튼 저렇게 가려집니다. 이후 컨텐츠가 다 나타날때까지 아래로 스크롤하는 도중에도 계속 저렇게 가려진 상태이고요. 최하단으로 스크롤되면 그때서야 이렇게 하단 nav가 온전히 나타납니다. 이걸 지금 몇주째 해결을 못하고 있는데요하단 nav의 css는​position: fixed; left:0; bottom:0; width:100%; padding:12px 0;​중요한 css는 대충 요정도이고요해결하려고 제가 찾아본 건​1. 저렇게 가로로 긴 막대 부분을 safe area라고 하고 이를 해결하기 위해서padding:12px 0 calc(constant(safe-area-inset-bottom) &#43; 12px); padding:12px 0 calc(env(safe-area-inset-bottom) &#43; 12px); 이렇게 해봤으나 소용없었습니다​2. position: fixed가 아니라 absolute, sticky등을 넣어보았으나 소용없었습니다.​3. bottom:0이 아니라 top부터 계산을 해서 넣어보았으나 소용없었습니다.​4. https://jmjmjm.tistory.com/126이곳도 참고해봤으나 소용없었음(사실 애초에 100vh를 선언한 곳이 없었기에..)​안드로이드 환경에서는 멀쩡하게 동작하고요ios 중에서도 저렇게 긴 막대처럼 생긴 홈 버튼(safe area)이 있는 곳에서, 거기에 더해 컨텐츠가 위 아래로 긴 경우에만 발생해서 골머리를 앓고 있습니다. 해결방법 알고 계신분 있을까요

dowhatyouwant · Answer

저는 상단 status bar(시간 및 배터리 용량 노출되는 영역)이 안보이고 손가락으로 위로 스크롤시 해당 영역이 컨텐츠가 노출됩니다. 며칠째 방안을 찾고 있는데 혹시 해결하셨을까요?

아이폰 기기에서 하단 고정 nav 오류에 관한 질문입니다

1개의 답변

#height 목록