모바일 확대 방지 처리

🤖 711 in / 566 out / 1277 total tokens

테트리스 게임을 모바일에서 플레이할 때 화면이 확대되는 문제를 해결했다. 실수로 핀치 줌이나 더블탭을 하면 게임 몰입도가 깨지는데, 이걸 막아달라는 피드백이 있었다.

세 가지 레이어로 방어했다. 먼저 viewport 메타태그에서 확대 자체를 차단하고, CSS에서는 touch-action을 manipulation으로 설정해 탭 제스처만 허용했다. 그리고 자바스크립트로 300ms 이내 연속 탭을 감지해 더블탭 확대를 preventDefault로 막았다.

body에 position: fixed와 overflow: hidden을 줘서 스크롤로 인한 화면 밀림도 방지했다.

* {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
 
body {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

이제 모바일에서 실수로 확대될 일이 없다. 게임에만 집중하면 된다.