[CSS] 뷰포트

뷰포트는 화면에서 실제 내용이 표시되는 영역으로,

데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고

스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다.

그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문젝 발생할 수 있다.

이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 한다.

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

※뷰포트 속성

- width        device-width, 양수         뷰포트의 너비를 지정한다.

- height       device-height, 양수        뷰포트의 높이를 지정한다.

- initial-scale   양수 

  뷰포트의 초기 배율을 지정. 기본값은 1이다. 1보다 작은 값을 사용하면

  축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대되 페이지를 표시.

- user-scalable     yes,no

  뷰포트의 화대/축소 여부를 지정한다. 기본값은 yes이다.

  반대로 no로 설정하면 사용자가 페이지를 확대할 수 없다.

- minimum-scale  양수

  뷰포트의 최소 축소 비율을 지정한다. 기본값은 0.25이다.

- maximum-scale  양수

  뷰포트의 최대 확대 비율을 지정한다. 기본값은 5.0이다.