[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지

<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%;
}

 

font-size를 12px에서 16px로 변경하면 16/12 = 1.33333333 (133.33%)를 확대한 셈이다. 이 비율만큼 다른 스타일 요소도 키워줘야 한다. transform: scale()을 사용해서 줄이면 다른 스타일 요소도 동일하게 축소되기 때문이다.

 

참고로 확대를 위해 원래 지정하려던 스타일 속성 값에 곱하기를 할 땐, 곱한 후의 값이 더이상 커지지 않을 때까지 5 * 1.3333.... 뒤에 소수점을 추가한다.

 

 

6.66666667 이상 커지지 않는 1.3333333333을 곱한다

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;
}

 

이제 원래 지정하고 싶었던 사이즈만큼 12/16=0.75 (75%) 축소한다. transform: scale(0.75)

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;

  transform: scale(0.75);
  transform-origin: left top; /* 회전 중심 지정. left top은 왼쪽 상단 모서리*/
}

 

하지만 축소된 만큼 오른쪽 하단에 공백이 생기므로 margin 값을 조정해야 한다. 아래는 최종 스타일 코드.

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;

  transform: scale(0.75);
  transform-origin: left top; /* 회전 중심 지정. left top은 왼쪽 상단 모서리*/

  margin-bottom: -10px;
  margin-right: -33.333333333%;
}

 

참고글

---

• iOS focus 시 자동 zoom-in 막기
• Disable Auto Zoom in Input "Text" tag - Safari on iPhone  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요