모바일에서 입력창(input) 눌렀을때 확대되는 효과 없애기

모바일 반응형으로 코딩을 하다보니 이번에는 모바일(iOS - 아이폰/사파리) 또는 안드로이드부분에서 input 태그로 만들어진 부분을 클릭하니 UX/UI를 무시해버리고 확대되서 입력창으로 바뀌는걸 확인... 🤣🤣🤣

 

왜이러냐 정말로..

 

이러다 삽질의 결과물은 meta 태그만 바꿔주면 되는것이였다..

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML 코드내에서 HEAD 부분에 meta 태그를 넣을 수 있는데, 기본적으로 vscode 쓰는 분들은 ! 으로 해서 만들면,

자동적으로 기본 메타태그까지 생성이 된다!

 

그렇지만, 아래와 같이 변경을 해줘야 모바일에서 input 클릭시 확대되는걸 막을 수 있다! 😁

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

이렇게 수정을 한 후, 작동 시키면 input 아무리 클릭해도 기존처럼 확대되는 경우를 피할 수 있습니다! 😎

( 이 포스팅으로 인해 나처럼 고생하는 분이 없기를 .. 👽 )