HTML5 뷰포트 메타 태그 문제 해결하기
HTML5에서 meta viewport 태그가 의도한 대로 작동하지 않는 문제를 겪고 있다면, 아래 두 가지 방법 중 하나를 적용해 보세요.
방법 1: 상세 옵션 지정하기
확대·축소 제어와 화면 크기를 명시적으로 설정하려면 다음과 같이 작성합니다.
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=400, height=device-height,
target-densitydpi=medium-dpi" />
이 코드는 사용자의 확대·축소를 비활성화하고(user-scalable=no), 초기 배율과 최대·최소 배율을 모두 1로 고정하며, 너비와 높이를 직접 지정합니다.
방법 2: 간단한 표준 설정 사용하기
대부분의 경우 아래처럼 간단한 표준 설정만으로도 충분합니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width는 페이지 너비를 기기 화면 너비에 맞추고, initial-scale=1은 초기 확대 비율을 100%로 지정합니다.
initial-scale 사용 시 주의할 점
예를 들어 사이트의 실제 너비가 100px라고 가정해 보겠습니다. 이때 initial-scale=1로 설정하면 페이지 전체가 한 화면에 표시되지 않고 일부만 잘려서 보일 수 있습니다. 이는 초기 배율이 기기의 물리적 화면 크기에 따라 계산되기 때문입니다.
따라서 콘텐츠가 화면에 맞지 않는다면 width 값을 조정하거나, 반응형 CSS(미디어 쿼리)를 함께 적용하는 것이 좋습니다.