[Develop/HTML&CSS] Mobile input focus 시 zoom 막기 및 mobile meta tag 정보

Mobile input 클릭 시 focus 막기 및 mobile meta tag 정보

친구들과 방 코드를 통한 채팅을 구현하는 팀 프로젝트 중 모바일에서 input창 focus시 화면이 zoom이 되는

현상이 발견하여 수정 중 블로그에 정리하고 누군가 이런 이슈에 대하여 수정하기 쉽도록 블로그를 정리하기로 했다.

 

예를 들어 Mobile로 web project시 input을 클릭하여 글을 쓰려고 하는데 화면이 zoom 처리되어 의도하지 않은 스크롤이 생기거나 화면이 가려질 경우 아래와 같은 방법으로 처리할 수 있다.

 

첫 번째, 가장 쉬운 방법은 input이나 textarea에 font-size를 16px 이상으로 주면 된다. 모바일 환경에서 글자 크기가

16px이하 일 경우엔 고맙게도 자동으로 zoom 처리가 된다. 아무래도 글씨 작을 경우 잘 안 보이는 이슈가 있기에 

처리를 해놓은 것 같다.

 

두 번째, viewport meta tag를 이용하는 방법이다. HTML header에 Mobile viewport 정보를 주면 처리할 수 있다.

아래는 viewport meta tag 설정 옵션이다.

 

meta name="viewport"

content="width=device-width": 디바이스 콘텐츠를 표현할 넓이

intial-scale=1: 페이지가 처음로드 할 때의 줌 레벨 제어

user-scalable=no: 사용자의 단말을 확대기능을 허용할지 정한다.

minimum-scale=1: 최소 크기 설정 (default: 0.25, range: 0~10)

maximum-scale=1: 최대 크기 설정 (range: 0~10)

 

두번째 방법에서는

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

처럼 user-scalable=no 설정을 추가하여 zoom 처리를 막아 처리하도록 했다.

 

viewport 설정

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Using the viewport meta tag to control layout on mobile browsers - HTML: HyperText Markup Language | MDN