Front-End Study/반응형 웹

뷰포트 (Viewport)

NewBean 2023. 5. 1. 12:43

뷰포트 (Viewport)

1. 뷰포트

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

 - 뷰포트는 메타 태그를 이용해 화면의 크기 or 비율을 조절

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

 

 

2. 뷰포트 속성

 

속성명 속성값 속성 설명
width device-width, 양수 뷰포트의 너비를 지정
height device-height, 양수 뷰포트의 높이를 지정
initial-scale 양수 뷰포트의 초기 배율 지정 (기본값 1)
(축소 < 1 < 확대)
user-scalable yes, no 뷰포트의 확대/축소 여부 지정
minimum-scale 양수 뷰포트의 최소 축소 비율 지정 (기본값 0.25)
maximum-scale 양수 뷰포트의 최대 확대 비율 지정 (기본값 5.0)