Viewport

뷰포트는 화면의 크기를 말합니다. 과거에는 컴퓨터가 웹사이트에 접근하기 위한 거의 유일한 수단이었기 때문에 뷰포트도 컴퓨터 화면에 최적화되었습니다. 문제는 상대적으로 큰 크기의 컴퓨터 화면에 최적화된 뷰포트는 작은 화면에서 표시되는 콘텐츠와 비율이 맞지 않아 미적기능이 저하되었습니다.

 

문제는 지정된 뷰포트의 크기보다 기기 화면이 작을 때 발생하는데요. 아래처럼 뷰포트의 크기가 기기 크기보다 클 때 콘텐츠가 화면에 다 표시되지 않습니다.

뷰포트의 설정된 크기보다 기기의 크기가 큰 경우는 무리 없이 화면에 표시됩니다.

디바이스의 종류와 관계없이 뷰포트의 비율을 조정하기 위해 아래와 같이 메타태그를 추가되었고 현재 널리 사용되고 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

뷰포트 메타태그는 아래와 같은 속성을 가집니다.

1. width

보기처럼 너비를 디바이스 너비로 설정하는 것이 좋지만 원하는 경우 뷰포트의 너비를 "width=500"와 같이 지정하는 것도 가능합니다.

 

2. height

뷰포트의 길이로 모바일처럼 작은 화면에서는 위, 아래로 스크롤하기 때문에 주로 지정하지 않습니다만 뷰포트 너비처럼 "height=device-height" 또는 고정가치로, "width=500", 설정이 가능합니다.

 

3. initial-scale

처음 화면이 로딩될 때의 비율로 최소 0.1 ~ 최대 10의 양수값만 가지며 기본값은 1입니다.

 

4. minimum-scale

가능한 줌아웃 비율로 최소 0.1 ~ 최대 10의 양수값만 가지며 기본값은 1입니다.

 

5. maximum-scale

가능한 줌인 비율로 최소 0.1 ~ 최대 10의 양수값만 가지며 기본값은 1입니다.

 

6. user-scalable

줌인 또는 줌아웃 기능 사용여부로 0(no)나 1(yes)의 값을 가지고 기본값은 yes

 

7. interactive-widget

Interactive UI widget의 사용에 따른 뷰포트 변화 여부설정하는 속성으로 'resize-visual', 'resize-content', 'overlays-content' 중 하나를 값으로 사용가능합니다.

• resize-visual: Interactive UI widget사용 시 visual viewport (뷰포트 중에서 화면에 표시되는 부분)의 크기가 변함
• resize-content: Interactive UI widget사용 시 viewport의 크기가 변함
• overlays-content: Interactive UI widget사용하더라도 뷰포트의 변화가 없음

디바이스별 뷰포트

반응형 경험을 위해 모바일 뷰포트를 사용하는 방법은 무엇입니까? | Adobe Target

 

마무리

이상으로 뷰포트에 대해서 알아보았습니다.

 

참고

Viewport - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

Viewport meta tag - HTML: HyperText Markup Language | MDN

 

Responsive Web Design Viewport