1. 뷰포트 (Viewport)
ㅇ 웹브라우저 상에 사용자에게 실제 보여지는 화면 영역
2. [참고] 데스크톱,테블릿,스마트폰에서, 보여지는 방식의 비교
ㅇ 데스크톱 PC의 경우
- 웹페이지 내용을 고정 크기 위주로 보여줌
- (화면 크기 조정 가능) 웹브라우저 크기 조정을 통해서, 뷰포트의 크기 마저도 바꿀 수 있음
- (해상도 조정 가능) 디스플레이 해상도 설정 조정을 통해서, 가로 x 세로 픽셀 조정도 가능함
ㅇ 스마트폰,태블릿 등 모바일의 경우
- 웹페이지 내용을 가변 크기 위주로 보여줌
- (화면 크기 조정 불가능)
. 기본적으로, 웹브라우저에서 보여주는 크기를 바꿀 수 없을 뿐 만 아니라,
. 고정 크기의 큰 화면(통상, 데스크톱에 맞춰짐)을 다 보려면 스크롤해야 만 되므로.
. 따라서, 모바일 기기는, 의도적으로 화면을 아주 작게 줄여서 보여주게 됨
. 다만, 글자와 달리, 이미지는 고정 크기이므로, 대부분 잘려서 보여짐
- (해상도 조정 불가능)
. 데스크톱과 달리, 모바일은 디스플레이 해상도 설정 조정 기능도 없음
3. 뷰포트 용도
ㅇ 웹문서 시작부의 meta 태그 요소에, 뷰포트 속성을 미리 지정하면,
ㅇ 웹브라우저 상의 사용자에게 보여지는 화면 영역을,
ㅇ 장치(스마트폰,테블릿 등 디스플레이) 크기에 맞게,
ㅇ 이미지 등의 크기가 적절히 조절되어, 보기좋게 보여줄 수 있게 됨
ㅇ 특히, 반응형 웹 디자인에 이를 활용하게 됨
2. 뷰포트 속성
ㅇ 뷰포트 내 주요 속성들
- width : 화면 폭, height : 화면 높이
. 例) width=device-device : 화면 너비 크기를 장치 스크린 너비 크기에 맞춤
- initial-scale : 초기 줌 레벨 조절 비율 (0 ~ 10 : 기본 1.0)
. 모바일 기기는, 컨텐츠가 클 경우, 기본적으로 컨텐츠 크기를 아주 작게 줄여서 보여줌
. 例) initial-scale=0.5 : 1/2로 화면 축소해서 보여줌
- user-scalable : 사용자가 화면 크기 조절 가능 여부 (yes, no : 기본 yes)
- minimum-scale : 최소 축소 가능 비율 (0 ~ 10 : 기본 0.25)
- maximum-scale : 최대 확대 가능 비율 (0 ~ 10 : 기본 5.0)
* 한편, minimum-scale,maximum-scale 모두 1 로 하면, user-scalable은 no와 같음
- target-densitydpi : DPI(Dots Per Inch) 지정
ㅇ 뷰포트 단위
- (vm, wh, wmin, wmax, ...)
ㅇ 例) <meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width : 페이지 너비를 장치의 스크린 너비로 설정
. 즉, 렌더링 영역을 장치 너비 크기와 같게 함
- initial-scale=1.0 : 페이지 로딩시, 줌(확대/축소) 없이 원래 크기를 사용
ㅇ 例) <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
- initial-scale=1 : 장치 스크린 너비 크기에 맞게 (줌 없음)
- user-scalable=no : 사용자가 화면 크기 조절 못하게 함
- maximum-scale=1 : 최대 확대 가능 비율을 가장 작게 적용