모바일 기기에서 웹페이지를 이용할 때 input text라던가 password 같은 입력 필드를 터치하면 화면이 일정 배율로 확대되는 효과가 나타납니다.
이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다.
이 내용으로 끝나면 허전하니 추가로 제가 모바일 웹을 구현할때 고정적으로 사용하는 viewport 속성을 공유해드립니다. 특별한 요구사항이 없는 한 아래 viewport 속성으로 고정하여 사용하고 있습니다.
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />