반응형 디자인을 적용한 웹페이지에서 사용자가 화면을 확대하거나 축소하는 기능을 막고 싶다면 META 뷰포트(viewport) 태그를 활용해야 합니다.
뷰포트 태그란?
뷰포트 메타 태그는 모바일 브라우저에게 페이지의 너비와 배율을 어떻게 처리할지 알려주는 역할을 합니다. 이 태그에 user-scalable 속성값을 no로 설정하면 사용자가 손가락 제스처나 핀치 동작으로 화면을 확대·축소할 수 없게 됩니다.
user-scalable=no
적용 방법
아래 코드를 HTML 문서의 <head> 영역 안에 추가하면 반응형 디자인에서 확대/축소 기능이 비활성화됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
속성 설명
- width=device-width: 페이지 너비를 기기의 실제 화면 너비에 맞춥니다.
- initial-scale=1.0: 페이지가 처음 로드될 때의 기본 배율을 100%로 지정합니다.
- maximum-scale=1.0: 사용자가 확대할 수 있는 최대 배율을 100%로 제한합니다.
- user-scalable=no: 사용자의 임의적인 확대/축소 동작 자체를 차단합니다.
이처럼 뷰포트 메타 태그의 속성만 잘 조합하면 별도의 JavaScript 없이도 간단하게 줌 기능을 제어할 수 있습니다.