[Javascript] 뷰포트

뷰포트에 대하여 한번 알아볼까요

 

뷰포트는 각각의 기기에 따라 환경을 설정해줍니다.

 

만약 뷰포트를 사용하지 않으면 PC의 화면이 모바일 화면 안에 모두 들어가려고하면서 글자, 이미지 등이 전부 작아져서

 

눈으로 보기 힘듭니다. 아래의 값처럼 설정을 통하여 간단하게 설정해줄 수 있습니다.

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

width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.

initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다.

minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.

maximum-scale : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다.

user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.