뷰포트 - 컴퓨터나 스마트 폰의 브라우저 화면 크기를 말한다
메뉴바와 탭 영역을 제외한 영역
스마트폰과 태블릿의 뷰포트 크기가 다르기 때문에
미디어 쿼리를 이용하여 뷰포트의 크기에 맞추어
CSS의 정의를 달리할 필요가 있다
스마트폰은 뷰포트의 크기를 고려하지 않고
웹 페이지를 만들게 되면
글자와 이미지가 굉장히 작아져 사용하는데 불편하다
이러한 단점을 보완하기 위하여 스마트폰 용 웹페이지를 제작할 때는
다음과 같이 <meta> 태그를 이용하여 모바일 기기의 뷰포트를 설정한다
<meta name="viewport" content="width=device-width, initial-scale=1.0">
'width=device-width' 는 웹페이지의 너비를
모바일 기기의 뷰포트 너비와 일치시켜서
화면에 표시하라고 웹 브라우저에게 알려주는 것