반응형 웹 디자인에서 확대/축소 비활성화하기
반응형 웹 디자인(responsive design)에서 사용자의 확대/축소(zoom) 기능을 비활성화하려면 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: 사용자가 직접 손가락 제스처 등으로 화면을 확대/축소하는 것을 차단합니다.
다만, 이 설정은 시력이 약한 사용자나 접근성을 중시하는 환경에서는 불편을 초래할 수 있습니다. 따라서 게임, 지도 등 특수한 목적의 페이지가 아니라면 신중하게 적용하는 것이 좋습니다.