채팅사이트에서 대화 입력시 키보드가 팝업될 때
iOS 환경에서는 div 높이가 자동으로 줄어들지 않습니다.
(안드로이드에서는 자동으로 됨)
* 번외
제가 이래서 구글을 좋아하지만, 애플을 싫어 합니다.
맥OS, swiftUI, 웹까지.... 똑같은 실력으로 개발해보면 결국 아이폰쪽이 퀄리티가 떨어집니다.
그런데 다른 개발자들도 비슷한 심정인지, 맥OS에서 돌아가는 프로그램들 보면 전부 완성도가 떨어진다는..
다시 본론으로 돌아와서
문제의 화면입니다.
대화 입력시 input에 focus가 되면 아래 처럼 대화영역 div 높이가 줄어들게 하려고 합니다.
보이는 브라우저 화면 사이즈가 변경될 때, 그 크기로 변경하는 방법을 사용했습니다.
<script>
// 모바일 환경에서 키보드 팝업으로 화면 사이즈가 변경되면 화면 사이즈 변경과 스크롤바 이동
window.visualViewport.onresize = function() {
$('html').height(window.visualViewport.height);
$('body').height(window.visualViewport.height);
$('#divWrapper').height(window.visualViewport.height);
setTimeout(function() {
window.scrollTo(0, 0);
scrollToBottom();
}, 10);
</script>
<body>
<div id="divWrapper">
</div>
</body>
키보드 팝업으로 화면 사이즈 변경 될 때 window.visualViewport.height는 변경이 되는데, window.height는 변경이 안되는 것 같더라고요.
그래서 되긴 되는데 뭔가 완벽하지는 않습니다.
네이버, 카카오 같은 탑티어 개발자들은 어떻게 했나 봤더니
저런 기능을 사용하지 않는 것 같습니다.
키보드 팝업시 화면이 바뀌거나, 화면 레이어 위로 키보드가 팝업 되게 구현되어 있습니다.
원래 iOS에서 이 기능이 잘 안되나 봅니다.
데모를 해보거나 좀 더 자세한 소스를 보려면 캡쳐 화면(이미지에 URL 있음)의 사이트에 접속해서, 디버깅 모드로 소스 확인하면 됩니다.
'개발' 카테고리의 다른 글
| HTML 모바일 웹 폰트 크기 커지는 문제 해결 방법 (0) | 2024.07.27 |
|---|---|
| 모바일 웹 input focus 안되는 문제 (0) | 2024.07.18 |
| 맥OS 이클립스 에러 - The JVM shared library does not contain the JNI_CreateJavaVM symbol (0) | 2023.10.12 |
| 자바스크립트 동적 ul li 추가 방법 (0) | 2023.01.11 |
| 자바스크립트 ES6 템플릿 리터럴 JSTL과 같이 사용방법 (1) | 2023.01.08 |