개발을 어느 정도 마치고 모바일에서도 QA를 하던 중… 모바일에서 폼을 작성할 경우 화면이 자동으로 확대되었다가 원상복귀되지 않는 버그를 발견했다.

해결하기 위해서 단순히 html에 메타 태그를 추가했다.

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

user-scalable=no, maximum-scale=1 속성으로 모바일에서 인풋 입력 시 화면이 확대되는 현상을 막을 수 있었다.

그런데!! 지승님께서 이런 코멘트를 달아 주셨다.

스크린샷 2023-12-13 00.50.30.png

접근성과 관련 있는 속성이었다고? 놀랄 노… 전혀 몰랐다.

Viewport meta tag - HTML: HyperText Markup Language | MDN 를 살펴보자.

user-scalable=no, maximum-scale=1 속성을 추가하는 것 대신 디자이너와 협의하여 모바일에서의 폰트 크기를 16px로 조정해 보는 것은 어떨까?