<meta name="viewport"> 정리

이번에는 반응형 웹에서 꼭 필요한 <meta name="viewport"> 태그를 정리해 보았다.

모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다.

그래서 <meta name="viewport">가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다.

이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다. 예를 들어 @media (max-width: 600px) 같은 코드는 실제 기기 폭(아이폰 375px 등)이 아니라 브라우저가 가정한 **가상 폭(980px)**을 기준으로 계산된다. 즉, 원하는 반응형 동작이 제대로 적용되지 않는다.

정리하면 <meta name="viewport">는 모바일 환경에서 실제 기기 화면 너비를 기준으로 잡아주는 태그이자, 반응형 웹 디자인의 출발점이라고 할 수 있다.