모바일 확대 완전 차단하기

🤖 609 in / 756 out / 1365 total tokens

공무원 근무기록 앱에서 모바일 확대를 완전히 차단했다. 사용자가 실수로 화면을 확대해서 UI가 깨지는 걸 방지하기 위해서다.

CSS만으로는 한계가 있었다. touch-action: manipulation은 더블탭 줌은 막지만, 핀치 줌까지는 막지 못한다. 그래서 touch-action을 pan-x pan-y로 변경해 스크롤만 허용하고 확대는 불가능하게 만들었다. 추가로 html 요소에도 적용해 루트 레벨에서 확대를 원천 차단했다.

JS 이벤트 리스너도 추가했다. touchmove에서 터치가 2개 이상이면 preventDefault로 핀치 줌을 막고, touchend에서 300ms 이내 연속 탭을 감지해 더블탭 줌도 차단했다. passive: false 옵션이 중요한데, 이걸 안 하면 preventDefault가 무시된다.

<script>
  document.addEventListener('touchmove', function(e) {
    if (e.touches.length > 1) e.preventDefault();
  }, { passive: false });
 
  var lastTap = 0;
  document.addEventListener('touchend', function(e) {
    var now = Date.now();
    if (now - lastTap < 300) e.preventDefault();
    lastTap = now;
  }, { passive: false });
</script>

모바일 웹에서 확대 막는 건 생각보다 까다롭다. CSS와 JS를 함께 써야 확실하다.