[HTML] - 메타태그(meta tag) 뷰포트(viewport) 속성 문법 및 사용법

#메타태그(meta tag) 뷰포트(viewport) 속성 문법 및 사용법

 

 

#메타태그 viewport

-컴퓨터나 휴대 단말기 등 장치에 Display요소가 표현되는 영역

-메타태그를 사용하면 모바일 웹의 뷰포트 크기나 배율등을 조절하여 모바일 웹에 최적의 상태로 화면이 표시되도록 설정할 수 있다.

 

#코드

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

 

viewport 속성

 

#width

-모바일 기기의 폭을 설정

-단위:px, default:980px, min:200px, max:10000px

-device-width 값 설정시 모바일 기기 화면크기를 기준으로 폭에 맞춰서 표시

 

#initial-scale

-초기 화면 배율(0~10) 설정

-1.0(100%) -> 모바일 기기의 가로 해상도로 조정

 

#maximum-scale

-최대 화면 배율 설정

-사용자가 줌인할때 확대 배율

 

#minimum-scale

-최소 화면 배율 설정

-사용자가 줌아웃할때 축소 배율

 

#user-scalable

-페이지의 확대/축소 가능 여부

 

#viewport-fit

-IOS11 Safari환경에서 Portrait -> Landscape 전환 시 자동 패딩 적용 이슈

-cover 사용 시 꽉찬 화면으로 조정해서 표시

 

#shrink-to-fit

-IOS11이전 버전은 Safari환경에서 viewport 크기보다 콘텐츠 크기가 크면 자동으로 줄여줌

-no 사용 시 자동 줄임 방지