Skip to main content

IOS Input(인풋) 자동 줌인 현상

IOS Input (인풋) 자동 줌인 현상 ?​

img

이번에 개인 프로젝트를 진행하면서 디자인대로 UI 뽑은 다음에 모바일로 테스트하던 중에 Input을 Focus 할때마다 확대가 되면서 좋지 않은 UX를 발견하게 되었습니다. 이에 대한 원인을 찾게 되다가 따로 칭할말이 없어서 제목과 같이 정리를 하게 되었습니다.

원인​

다른 안드로이드 폰이나 기기에서는 발생되는 현상이 아니고 IOS에서만 발생하는 것을 확인했습니다. 그리고 이는 IOS가 사용자의 편의를 위해서 특정 px 값이하로 내려가게 되면 자동으로 확대가 되게끔 지정되어 있는 것 같습니다.

해결책​

1. 뷰 포트 관련 Meta 태그를 추가​

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

위와 같이 해당 페이지의 layout단에 메타태그를 추가하여 최대 스케일을 1로 강제하면 확대가 되지 않습니다.

2. 폰트 사이즈 키우기​

<input className="text-[16px]" />

위와 같이 Input 태그에 폰트 크기로 최소 단위인 16px 맞춰주면 더 이상 확대가 되지않는 것을 확인할 수 있습니다.

결론​

해당 프로젝트에서 디자인을 도와주던 친구와 커뮤니케이션하면서 두가지 위에 두가지 제안책을 제시했습니다.

그리고 애초에 디자인부터 폰트가 너무 작았긴 했지만 16px까지 키우는건 너무 디자인적으로 맘에 안드신다고 하여

1번 방안으로 Layout에서 뷰포트 메타태그 추가함으로써 이 현상을 제거하고 UX 개선을 해보았습니다.