모바일의 경우에 크롬으로 실행했을땐 딱 적절한 사이즈로 나왔는데. 카카오톡의 브라우저로 봤을 떄. 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는 기기의 해상도에 맞추어서 자동으로 웹페이지 크기를 조정해주는 듯 하다.


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

'프로그래밍 > HTML5' 카테고리의 다른 글

[HTML5] 시맨틱 태그 정리  (0) 2017.02.02
[HTML5] 기본 용어 정리  (0) 2017.02.01
[HTML5] 뷰 포트(viewport)  (0) 2016.08.16
[HTML5] 비디오 태그  (0) 2016.08.05
[HTML5] 오디오 태그  (0) 2016.08.05
[HTML5] 공간 분할 태그  (0) 2016.07.26

댓글 작성