[Mobile, HTML] 모바일웹에서 input text클릭 시 확대 막아주기

bootstrap을 이용해 반응형 웹을 만들고 폰에서 테스트를 해보니, text 컴포넌트를 클릭하면 미묘하게 확대가 되는 현상이 있다.

크롬의 모바일 모드나 사파리에서는 잘 보이지 않거나 몰랐는데 실제 폰에서는 보이게 된다.

meta태그의 viewport를 추가해주면 간단하게 해결할 수 있다. bootstrap 템플릿 튜토리얼 예제에도 이 태그가 있었는데

이게 왜 있나했더니.. 이런 이유가 있었던거다.

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

이 3줄 중 마지막 항목이 이걸 막아준다. (아무튼 저 메타는 다 추가하면 됨)

 

참고 출처 :

http://blog.freezner.com/archives/1880