[React] 모바일에서 입력창 터치 시 확대 방지

이번 동아리 사이트 개발하면서 모바일뷰는 처음 개발해봤는데, 자꾸 입력 컴포넌트 (input, textarea)를 터치했을 때 화면이 마음대로 확대가 돼서 막는 방법을 찾아 봤다.

 

생각보다 간단... index.html의 메타 태그에 user-scalable=no를 추가해서 아래처럼 수정해주면 문제가 해결된다.

 

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

 

모바일에서 input 컴포넌트 클릭 시 자동으로 화면이 확대될 경우 해결 방법 / 모바일에서 입력창(input) 눌렀을 때 확대되는 효과 없애기 / 모바일 웹에서 화면이 확대/축소되지 않도록 설정하기 / 모바일웹 사용자 확대 축소 제어 / 아이폰 input, select 확대 기능 없애기