iOS input 태그 focus시 자동 zoom-in 막기

충남대학교 채팅 웹을 개발하면서, ngrok을 이용해 내 핸드폰을 보며 모바일에서 레이아웃을 잡던 중에 신기한 현상을 발견했다.

input 포커스시에 자동으로 zoom-in이 먹힌다는 점!

 

 

 

우선 해결방법부터 보자.

head태그에 meta 태그를 넣어주면 된다.

페이지가 모바일 크기에 완전히 최적화되어 만들어졌다면 meta 태그를 사용하여 줌을 막을 수 있다.

 

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

 

이제 완전히 해결된 것 같지만, 이렇게되면 페이지의 확대자체가 불가능해진다.

페이지 확대 자체가 불가능하다는 것은 사용자 경험이 좋지 못하다.

 

다르게 해결해보자. 더 좋은 해결방법은 폰트 크기를 자동 줌인이 발생하지 않은 최소 크기인 16px이상으로 맞추는 것이다.

나는 보통 rem 상대 단위를 사용하는데, html에 font-size:10px을 줘서 rem을 다루기 편하게 관리하는 편이다.

 

그렇다면 내 코드에서는 저 input이 최소 1.6rem이상이 되어야 input에 자동 zoom-in이 가지 않는다.

 

input {
	font-size: 1.6rem;
}

 

input, textarea, select에서도 모두 자동 zoom-in이라는 같은 현상이 발생한다.

 

근데 font-size를 16px이상으로 했을 때 내가 원하는 크기보다 클 수 있을 것이다. 이제 여기부터는 꼼수들을 활용해 해결할 수 있다.

포커스 되었을 때만 폰트 크기를 변경한다던가. 모바일/데스크탑 환경에 각각 폰트 크기를 다르게 한다던가.

 

16px로 적용하고 scale로 낮추는 방법도 있다. 

 

아래와 같은 스타일을 적용하고 싶다면,

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

 

16px로 폰트 크기를 정하고 12px크기로 보이도록 <input>을 축소한다. (그 비율만큼 다른 요소들의 크기를 키워준다.)

 

input[type="text"] {
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;
}

 

그리고 이제 계산된 스타일을 적용한 input에 transfrom으로 scale을 바꿔준다.

 

input[type="text"] {
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    transform: scale(0.75);
    transform-origin: left top;
}

 

또한 input이 축소된 만큼 우측과 하단에 공백이 생기므로 이걸 채워준다.

 

input[type="text"] {
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    transform: scale(0.75);
    transform-origin: left top;

    /* 여기를 추가합니다. */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

3번은 솔직히 좀 난잡할 수 있다. 나는 font-size를 16px이상 주는 것으로 해결했다.

 

 

참고

https://devsoyoung.github.io/posts/ios-input-focus-zoom/