개발을 어느 정도 마치고 모바일에서도 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
속성으로 모바일에서 인풋 입력 시 화면이 확대되는 현상을 막을 수 있었다.
그런데!! 지승님께서 이런 코멘트를 달아 주셨다.
접근성과 관련 있는 속성이었다고? 놀랄 노… 전혀 몰랐다.
Viewport meta tag - HTML: HyperText Markup Language | MDN 를 살펴보자.
user-scalable=no
, maximum-scale=1
속성을 추가하는 것 대신 디자이너와 협의하여 모바일에서의 폰트 크기를 16px로 조정해 보는 것은 어떨까?