뷰 포트란 웹 페이지에서 사용자가 볼 수 있는 영역을 말합니다. 사용하는 기기에 따라 화면 크기가 달라지기 때문에 뷰포트 설정을 이용해 각 기기별 화면을 어떤 게 제어할지 설정하게 됩니다.
반응형 웹페이지로 설계된 경우보다는 PC 화면에 고정된 크기로 설계된 웹 페이지를 모바일 화면에 맞게 축소해야 하는 경우 또는 그 반대의 경우에 사용하게 됩니다. 그 외에 모바일 기기에서 사용자가 손가락을 이용해 화면을 움직이거나 줌 기능을 이용해 확대, 축소 등을 할 수 있습니다.
뷰포트 기본
모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">1. width
- width 속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 width=600라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있는데, device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 height와 device-height 값들이 유용하게 사용될 수 있다.)
2. initial-scale
- initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. 1.0은 100%로를 의미한다.
3. maximum-scale & minimum-scale
- 사용자가 얼마나 페이지를 확대 또는 축소 할 수 있는지를 정한는 값으로 0~10까지 범위를 같는다.
4. user-scalable
- user-scalable 속성들은 사용자가 페이지를 줌-인, 줌-아우트 할 수 있는지 yes와 no로 설정한다.
5. shrink-to-fit
- shrink-to-fit는 애플기기와 관련된 속성으로 yes와 no가 있다.
참고한 문서
반응형
