Meta tag viewport 설정

뷰 포트란 웹 페이지에서 사용자가 볼 수 있는 영역을 말합니다. 사용하는 기기에 따라 화면 크기가 달라지기 때문에 뷰포트 설정을 이용해 각 기기별 화면을 어떤 게 제어할지 설정하게 됩니다.

반응형 웹페이지로 설계된 경우보다는 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로 설정한다.

참고한 문서

'코드조각 > HTML' 카테고리의 다른 글

Meta tag viewport 설정  (0) 2020.07.30
마크다운 문법 [Markdown Syntax]  (0) 2020.05.22
댓글 0