viewport

Concept

유저가 보는 웹페이지 영역
디바이스에 따라 viewport는 다 다르며, 심지어 브라우저 창크기 조절에 따라서도 다르다.

스마트 폰이 나오기 전에는 PC에서만 웹을 볼 수 있었기에, viewport를 전혀 고려하지 않은 상태에서 웹페이지를 개발하였다.(fixed width)
이렇다보니, 스마트 폰이 출시 이후 모바일로 웹을 보기 너무 불편했고, 웹페이지는 2가지 중 한가지 결정을 해야했다.

1. mobile 버전 웹 페이지를 추가
2. 반응형으로 디자인 변경

viewport 설정 방법

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

viewport width를 유저가 사용하는 device width에 따르게끔 설정

initial-scale=1.0

브라우저 처음 로드 할때 zoom level를 세팅

Sample

viewport tag 적용 전	viewport tag 적용 후