반응형으로 만들었는데 휴대폰에서 글씨가 깨알같이 작게 보이거나, 반대로 손가락으로 벌려도 확대가 안 된다는 문의를 종종 받습니다.
둘 다 대부분 viewport 메타 태그 한 줄에서 시작됩니다. 권장 설정과 함께, 확대 막기 옵션을 쓰면 안 되는 이유를 정리했습니다.

1. 기본은 width=device-width, initial-scale=1

<head> 안에 아래 한 줄을 넣으면 화면 폭을 기기 폭에 맞추고 처음 배율을 1로 시작합니다. 오래된 사이트를 리뉴얼하다 보면 width=480처럼 숫자를 박아 둔 경우가 있는데, 이러면 360~390px 폭 휴대폰에서 페이지가 실제보다 넓게 잡혀 축소되어 보이거나 옆으로 밀립니다. 저희도 실제 리뉴얼 현장에서 이 한 줄을 고치는 것만으로 모바일 레이아웃 문제가 한꺼번에 풀린 적이 있습니다.

<!-- 권장: 이 한 줄이면 충분합니다 -->
<meta name="viewport"
  content="width=device-width, initial-scale=1">

<!-- 피하세요: 고정 폭 -->
<meta name="viewport" content="width=480">

2. user-scalable=no는 넣지 않는 것이 맞습니다

디자인이 흐트러지는 게 싫어서 확대를 막는 옵션을 넣는 경우가 많습니다. 하지만 작은 글씨를 키워 봐야 하는 어르신이나 시력이 약한 분들에게는 사이트를 못 쓰게 만드는 설정입니다. 웹 접근성 지침(WCAG)에서도 확대 차단을 문제로 보고, Lighthouse 접근성 검사에서도 감점 항목입니다. 게다가 아이폰 사파리는 iOS 10부터 이 값을 기본적으로 무시하기 때문에, 안드로이드에서만 확대가 막히는 어정쩡한 상태가 됩니다.

<!-- 확대를 막는 설정 (권장하지 않음) -->
<meta name="viewport" content="width=device-width,
  initial-scale=1, maximum-scale=1, user-scalable=no">

3. 막고 싶었던 진짜 문제는 따로 해결

확대 차단을 넣는 이유를 들어 보면 대개 두 가지입니다. 버튼을 빠르게 두 번 누르면 화면이 확대되는 문제와, 아이폰에서 입력창을 누르면 자동으로 확대되는 문제입니다. 앞의 것은 touch-action: manipulation으로 더블탭 확대만 끌 수 있고, 핀치 확대는 그대로 살아 있습니다. 뒤의 것은 입력창 글자 크기를 16px 이상으로 주면 생기지 않습니다.

/* 버튼 연타 시 더블탭 확대만 막고 싶을 때 */
button, .btn, a {
  touch-action: manipulation;
}

/* 아이폰 입력창 자동 확대는 글자 크기로 해결 */
input, select, textarea {
  font-size: 16px;
}