mata tag view port

viewport ( 뷰포트 )

뷰포트 meta 태그 ( meta tag : 브라우저의 화면 설정과 관련된 정보를 제공합니다. ) 모바일 웹페이지의 특정한 정보를 제공합니다. 

 

예 )

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, max-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi”>

 

width : 화면의 너비
예시 - ​​width = 240 , width = device-width

 

height : 화면 높이
예시 - ​​height = 240 , width = device-height

 

initial-scale : 초기 확대 비율
예시 - ​​initial-scale = 2.0

 

user-scalable : 확대 및 축소의 가능 여부

예시 - ​​user-scalable = no

 

minimum-scale : 최소 축소 비율

예시 - ​​minimum-scale = 1.0

 

maximum-scale : 최소 축소 비율

예시 - ​​maximum-scale = 2.0

 

target-densitydpi : DPI 지정

예시 - ​​target-densitydpi = medium-dpi

 

 

반응형 또는 모바일 웹페이지를 제작할 경우 viewport의 width, height 를 device-width, device-height 및 특정 width, height 값으로 정의하지 않는 경우 아래와 같이  browser 화면이 device를 고려하지 않고 출력이 되어서 가독성이 떨어집니다.

device-width, device-height의 정의한 경우 아래와 같이 텍스트가 출력됩니다.