[개발일지#1] 아이폰 노치(Safe area)영역

wrkim·2022년 7월 29일

노치 아이폰 아이폰노치 앱퍼블리싱 퍼블리셔

개발일지

목록 보기

1/2

텍스트알아볼 주제 : Git
해결 방책에대한 고민
1차해결방법
2차해결방법
3차해결방법

알아볼 주제 : 아이폰 노치(Safe area)영역

롯데케피탈 챗봇 퍼블리싱 작업 중 아이폰 노치 영역에 대한 이슈가 발생했다.

최종적으로 롯데케피탈 퍼블리싱 작업 약 3일만의 고생 끝에 아이폰 노치 영역 해결을 했으나 계속 구글링해보고 고민해봐야할 문제 같다.

롯데케피탈 노치영역이라고하면

챗봇에서 텍스트를 적기위해 텍스트 영역 클릭 그 다음 다시 화면을 터치하면 키보드가 숨겨지며 스크롤이 생기는 이슈가 있었다.

해결 방책에대한 고민🤔

1차 해결 방법

헤더에 메타태그를 추가
- viewport-fit=cover : ios 대응
- user-scalable=no : 유저가 확대 기능을 사용 못하게 한다
- width=320 : 화면을 320으로 확대한다.

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

2차 해결 방법

참고사이트

style.css에 해당코드 추가
- -webkit-fill-available;
  // 크롬에서안될 상황 대비 ios 노치 대응
- padding-bottom: env(safe-area-inset-bottom);
  // ios 노치 대응

/* 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대응이였다.
겸사 겸사 유저 확대 기능 제어까지 했다.

# 3차 해결 방법

참고사이트

스크립트 추가
- 화면 리사이즈시 높이값을 찾아내 그 높이px을
  --app-height 담은 후 css 높이값으로 사용한다.

/* 
    @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);