[반응형 웹 스터디] 뷰포트

 

뷰포트

 

화면에서 실제 내용이 표시되는 영역

뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 함

<meta name="viewport" content"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

 

• width : 뷰포트 너비 설정
• initial-scale :  초기 배율 설정
• minimum-scale : 최소 축소 비율 설정, 기본값 0.25
• maximum-scale : 최대 확대 비율 설정, 기본값 5.0

* minimum-scale / maximum-scale 속성을 1로 지정할 경우 user-scalable=yes 로 지정하더라도 확대나 축소할 수 없어진다.

 

* 스마트 기기의 뷰포트 영역 확인 : http://dnsdk300.dothome.co.kr/viewport/ 

 

 

 [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]