[축구모임 홈페이지개발] 02/27 개발일지 Nodejs / 사이트 확대 제어 meta tag

승부차기 탭에서 버튼을 빠르게 클릭하다보면 버튼 클릭이 인식되는 게 아니라

자동으로 확대가 되어서 좀 불편했다.

 

이를 해결하기 위해서 확대를 제어할 수 있는 방법이 있을까 알아보았는데, 

 

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">

 

위 meta 태그를 사용해보았다.

 

"user-scalable=no"

모바일로 확인하니까 반응형 디자인이 다 초기화가 되었다.

웹버전으로 보여졌다.

위 meta 태그는 사용자의 확대/축소 제스처를 비활성화 하지만, 이로 인해 반응형 디자인이 초기화가 될 수 있다고 한다.

그래서 더 알아보니, 위 태그를 유지한 채 javascript 를 이용해야한다고 한다.

 

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

 

 document.addEventListener('gesturestart', function (e) {

            e.preventDefault();

        });

 

위와 같은 방법으로 중간에 이벤트를 가로채서 처리하는 방법이 있었는데, 버튼을 두 번 빠르게 클릭하니 소용이 없었다.

더 알아봐야겠다.