텍스트알아볼 주제 : Git
해결 방책에대한 고민
1차해결방법
2차해결방법
3차해결방법
롯데케피탈 챗봇 퍼블리싱 작업 중 아이폰 노치 영역에 대한 이슈가 발생했다.
최종적으로 롯데케피탈 퍼블리싱 작업 약 3일만의 고생 끝에 아이폰 노치 영역 해결을 했으나 계속 구글링해보고 고민해봐야할 문제 같다.
챗봇에서 텍스트를 적기위해 텍스트 영역 클릭 그 다음 다시 화면을 터치하면 키보드가 숨겨지며 스크롤이 생기는 이슈가 있었다.
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
/* iOS only */
@supports (-webkit-touch-callout: none) {
height: -webkit-fill-available; //크롬에서안될 상황 대비 ios 노치 대응
}
html{
height: -webkit-fill-available;
/* 익스플로러 IE 10 확대 제어 */
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: var(--app-height);
height: -webkit-fill-available;
padding-bottom: env(safe-area-inset-bottom); //ios 노치 대응
overflow: hidden;
touch-action: none; //터치제어
}
header#header {
text-align: center;
padding: calc(constant(safe-area-inset-top) + 5px) 0 0 ; //ios 노치 대응
padding: calc(env(safe-area-inset-top) + 5px) 0 0 ; //ios 노치 대응
}
그럼에도 해결이 안되어 3차 해결 방법을 찾기 시작했다.
제일 귀찮았던 JS대응이였다.
겸사 겸사 유저 확대 기능 제어까지 했다.
/*
@date: 2021-11-11
@title: ios 화면 높이 확인
*/
const appHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()
/* (S) CSS */
:root {
--app-height: 100%;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: var(--app-height);
height: -webkit-fill-available;
padding-bottom: env(safe-area-inset-bottom);
overflow: hidden;
touch-action: none;
}
/* (e) CSS */
/*
@date: 2021-11-11
@title:모바일 스크롤 touchmove, onclick, mousewheel 세가지 이벤트 제어
*/
disableScroll = () => {
document.querySelector('body').addEventListener('touchmove', this.removeEvent, { passive: false });
document.querySelector('body').addEventListener('onclick', this.removeEvent, { passive: false });
document.querySelector('body').addEventListener('mousewheel', this.removeEvent, { passive: false });
}
removeEvent = e => {
e.preventDefault();
e.stopPropagation();
}
enableScroll = () => {
document.querySelector('body').removeEventListener('touchmove', this.removeEvent);
document.querySelector('body').removeEventListener('onclick', this.removeEvent);
document.querySelector('body').removeEventListener('mousewheel', this.removeEvent);
}
/*
@date: 2021-11-11
@title: 두 손가락으로 화면 클릭시 무시 이벤트
*/
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
/*
@date: 2021-11-11
@title: 두번 연속 탭 0.3초보다 짧다면 무시 이벤트(두번 연속 택 확대 금지)
*/
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
} lastTouchEnd = now;
}, false);
다만 내 핸드폰 SE에서는 뭔가 작동이 제대로 안되는듯하여
찝찝하지만 아이폰 11 , 아이폰 X에서는 하단 여백이 생기지 않는걸 확인했다....😎
추가할 상황이 생기면 또 추가할 계획이다.