search

eastsunyong / CLIPS_Project

약속을 관리하는 웹앱 프로젝트
0 stars 2 forks source link

모바일 뷰 하단 잘림 현상 #55

Closed somfist closed 1 year ago

somfist commented 1 year ago

Describe Trouble 모바일로 봤을 때 서비스 하단의 navigation바 가 보이지 않음

To Reproduce

  1. 페이지 진입하면 서비스 하단에 navigation바가 보이지 않음
  2. 손가락으로 드래그를 해 주소창과 하단 tool바를 없애면 navigation바가 보임
  3. 이후 드래그하다 주소창과 하단 tool바가 생기면 마찬가지로 가려짐

Expected behavior 서비스의 height가 주소창과 하단 tool바의 높이를 포함하지 않고 측정되어 스크롤 생성

Screenshots

somfist commented 1 year ago

해결방안 window의 innerHeight 속성을 활용하여 Mobile 컴포넌트(layout) 생성 시 높이를 계산하고 프로퍼티로 등록하여 적용

somfist commented 1 year ago

추가 문제 11버전 이상의 IOS환경에서는 여전히 하단의 navigation바가 보이지 않는 현상 확인

해결방안 css의 env()속성을 사용하여 safe area의 bottom 크기만큼 하단 navigation바에 패딩을 추가