[React] 모바일에서 input 컴포넌트 클릭 시 자동으로 화면이 확대될 경우 해결 방법

모바일에서 input 컴포넌트 클릭 시 자동으로 화면이 확대될 경우 해결 방법은 메타데이터 내 user-scalable=no 를 설정하면 된다.

 

CRA로 생성한 리액트 프로젝트 기준으로 다음과 같이 index.html 파일 내 viewport 메타 데이터 정보가 존재한다. 

 

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

 

여기에 user-scalable=no 를 추가하면 간단하게 문제를 해결할 수 있다. 

 

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