[HTML5] 뷰 포트(viewport)

모바일의 경우에 크롬으로 실행했을땐 딱 적절한 사이즈로 나왔는데. 카카오톡의 브라우저로 봤을 떄. PC마냥 나와서 깨알같은 글씨로 나오는 단점이 있어서 찾아보던 중에.

meta태그내에 viewport 라는게 있는데. 

<meta name="viewport" content="속성1=속성값", 속성2=속성값2" ... />

대략 이런식

width=너비 ('device-width' : 기기의 사이즈)

height=높이 ('device-height' : 기기의 높이)

initial-scale=초기 표시 비율 (기본은 1.0, 꽉찬 페이지)

maximum-scale=최대 확대 비율 (0~10.0 [기본 : 5.0])

minimum-scale=최소 확대 비율 (0~10.0 [기본 : 5.0])

user-scalable=[yes/no] (기본 : yes)

이런식으로 사용을 한다.

viewport는 기기의 해상도에 맞추어서 자동으로 웹페이지 크기를 조정해주는 듯 하다.

반응형 웹 페이지를 만들 때. 주로 사용하게 된다.