<textarea> <input> <select> 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다.

1. 확대 금지 — 모바일용으로 적절하게 디자인된 경우
2. 폰트 크기를 16px 이상으로 변경 — 추천
3. 폰트 크기를 16px로 변경하고 transform: scale()을 이용해 원하는 만큼 줄이는 방법 — 복잡함

방법1 — 확대 금지

html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 수 없기 때문에 접근성이 떨어지는 단점이 있다.

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

• initial-scale 초기 화면 배율
• maximum-scale 최대 확대 배율
• user-scalable 사용자가 화면을 확대/축소할 수 있는지 여부
• width=device-width 브라우저 너비를 디바이스 너비에 맞춰서 표시

방법2 — 폰트 크기를 16px 이상으로 변경

(인풋창)자동 확대가 발생하지 않는 폰트의 최소 크기인 16px로 변경. 가장 간단하지만 가장 확실한 방법.

방법3 — transform: scale() 활용

인풋창의 폰트 크기를 16px로 적용하고, transform: scale()을 사용해서 원하는 폰트 크기 만큼 줄이는 방법. 최종적으로 아래 스타일대로 설정하고 싶다고 가정하고,

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