84. (html/css/javascript/jquery) 카카오 인앱 브라우저 주소 표시줄 및 네비게이션 바 자동 숨김 현상 조치 사항

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

---

[원인]

>> 아이폰,  안드로이드 모바일에서 카카오톡 링크 접속 시 인앱 브라우저 실행

>> 주소 표시줄, 네이게이션 바 자동 숨김 현상으로 UI 화면이 망가지는 경우

​

​

​

​

[해결 방법]

공통 : 
 - 가상 키보드 밀림 현상을 방지하기 위해서 각 컨테이너 position 속성을 fixed 로 지정한다


아이폰 추가 설정 : 
 - 자바스크립트 onresize 함수에서 >> 각 컨테이너 height , top 비율을 다시 설정 
   (변경된 body 해상도 확인 후 다시 비율 설정 : 자연스럽게 full screen 만들기)

 - 자바스크립트 onready 함수에서 카카오 인앱 브라우저 접속 확인 >> 아이폰인 경우 적용 실시

​

​

​

[추가 참고 코드]

- 모바일 브라우저 새로고침 방지 : css body 설정 부분에 overflow:hidden; , overscroll-behavior: contain; 추가


- 아이폰 줌인 효과 제거 : <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">


- 아이폰 사파리 브라우저에서 body 밀리는 현상 : body touchmove 이벤트 비활성 , overflow hidden 처리 실시

---