웹 어플리케이션 모바일 화면 확대 방지 (입력, 더블탭, 확대)

웹 어플리케이션을 만들때 반드시 알아둬야할 것이 있다.
바로, 사용자들의 원치 않는 화면확대가 이루어질 때가 있다는 것이다.

예를 들어 웹 어플리케이션에 검색창을 누를 때 라던지,
더블탭을 한다던지, 두 손가락으로 확대한다던지의 상황이다.

해결방법은 간단히 html과 js에 아래의 코드를 삽입하면 된다.

먼저 html에는 아래의 코드를 삽입한다.
시작 스케일을 1.0 최대 스케일을 1.0으로 설정해 놓은 뒤, 사용자가 스케일을 조절할 수 없게 하겠다는 코드이다.

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

js파일에는 아래의 코드를 삽입한다.
첫번째 코드는 만약 두 손가락으로 화면을 클릭 시 이 이벤트를 무시하겠다는 함수이다.
두번째 코드는 만약 두번 연속 탭이 0.3초보다 짧다면 이를 무시하겠다는 것인데, 이는 두번 연속 탭하였을 때 화면이 확대되는 것을 막아준다.

document.documentElement.addEventListener('touchstart', function (event) {
     if (event.touches.length > 1) {
          event.preventDefault(); 
        } 
    }, false);

var lastTouchEnd = 0; 

document.documentElement.addEventListener('touchend', function (event) {
     var now = (new Date()).getTime();
     if (now - lastTouchEnd <= 300) {
          event.preventDefault(); 
        } lastTouchEnd = now; 
    }, false);
    

 

이를 적용하여 이번 울산코로나맵 페이지를 제작하였다. 혹시 어떤 식으로 이벤트를 막아주고 있는 지 궁금하다면 참고하길 바란다.
https://coronamap-ulsan.site

코로나 울산

 

이상이 있다면 댓글로 알려주세요 :)