모바일 웹 화면을 개발할 때 신경써야할 것들

 

 

1. IOS touch event

ios의 경우 버튼을 클릭 할 때 300ms 정도 딜레이가 있다고 한다.

이 부분을 해결하기 위해 구글링하면서 여러가지 방법을 시도해봤다.

 

 

1) viewport 태그 추가

head에 viewport 값을 추가한다.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

 

2) 버튼에 touch-action 스타일 추가

<div class="row" style="touch-action: none"></div>

더블탭 방지를 위해 touch-action에 보통 manipulation을 넣는데, 나는 굳이 pinch-zoom을 넣을 필요가 없어서 none으로 넣어버렸다.

 

 

3) touchend 이벤트 추가

click 이벤트를 추가한 button에 touchend 이벤트를 추가한다.

이렇게하면 모바일에서 버튼 터치할 때 onClickBtn() function이 2번 호출되는 줄 알았는데, 다행히 한번만 호출된다.

웹에서도 버튼 클릭시 touch 이벤트가 발생하지 않는다.

<button class="key" onclick="onClickBtn();" ontouchend="onClickBtn();">