[CSS] 모바일 웹브라우저 줌인아웃(Zoom In/Out) 강제 차단하기

기본적으로 모바일 웹 브라우저는 특별히 제한하지 않은 이상 핀치줌, 더블탭 줌 등 다양한 화면 줌인아웃 기능을 제공합니다.

모바일 웹 브라우저에서 보이는 웹페이지가 모바일 대응 웹페이지, 또는 반응형 웹 페이지여서 추가의 줌인아웃이 필요없는 경우 줌인아웃을 제한하기도 하지만, 모바일 기기, 또는 모바일 웹 브라우저에 따라 제한을 하는 방식이 조금씩 다릅니다.

모바일 웹 브라우저의 줌을 차단하는 공용 메타 테그는 다음과 같습니다.

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

웹 브라우저 지원 사양에 따라 조금씩 다르지만 대부분 모바일 웹 브라우저에서 잘 동작합니다.

모바일용 애플 사파리 웹 브라우저는 "width=device-width" 속성 값이 반드시 있어야 합니다.

iOS용 사파리의 경우 버전에 따라 줌이 차단되지 않을 수 있습니다.

그런 경우 추가적으로 다음 메타 태그를 추가해야 합니다.

<meta name="HandheldFriendly" content="true">

추가적으로 CSS에

html{
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

까지 추가해줘야 합니다.

iOS용 사파리의 경우 버전업이 되면서 이런 HTML 표준 속성들이 강제로 해제되기도 합니다.