IOS에서 input focus 시 자동으로 zoom 되는 현상 막기

기존에 HTML, JS(jQuery), CSS로 만들어진 프로젝트를 수정하던 중 IOS에서만 input을 focus 할 때 화면이 자동으로 zoom-in 되는 현상이 일어났고, 이 문제를 해결하기 위해 몇일동안 삽질을 했다. (다른 프로젝트 진행 하면서 짬내서 했던 거라 삽질이 좀 길었다.)

 

첫번째 시도 때는 CSS에 zoom 속성을 사용하였는 데 변화는 없었다.

/* Keyword values */
zoom: normal;
zoom: reset;

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

zoom - CSS: Cascading Style Sheets | MDN

 

두번째  시도 때는 구글링을 "좀 자세하게 키워드를 넣어서 검색 해보자"라는 생각으로 구글에 "IOS input zoom"이라고 검색 했더니 아래와 같이 해결방법이 나왔다.

 

아래 블로그를 참고하여 해결 할 수 있었다.

iOS <input> focus 시 자동 zoom-in 막기

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