728x90
반응형
#메타태그(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 사용 시 자동 줄임 방지
728x90
반응형
'IT > HTML & CSS' 카테고리의 다른 글
[HTML] - img 태그 오류 대체 이미지 노출 속성 onerror 문법 및 사용법 (0) | 2022.02.09 |
---|---|
[HTML] - 데이터(data) 속성 사용법 (0) | 2021.08.03 |
[HTML 기초] - 4. HTML 태그 <form>, <input> 사용법 (0) | 2020.07.17 |
[HTML 기초] - 3. HTML 태그 <table> 사용법 (4) | 2020.07.17 |
[HTML 기초] - 2. HTML 자주 사용하는 태그 (0) | 2020.07.16 |
댓글