[공부 필기] 메타 뷰포트(meta viewport) 태그

김간장 2021. 2. 24. 23:43

meta viewport (메타 뷰포트 태그) 사용법

meta viewport(메타 뷰포트 태그) 사용법 얼마 전에 meta 태그 사용법이란 글을 썼는데 [html] meta 태그 사용법 위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요. 힌트를 주신 admin 님께 감사합

aboooks.tistory.com

viewport?

=> 사용자에게 보여지는 화면 영역

<meta name="viewport" content="width=device-width">

- 브라우저 너비를 장치 너비에 맞춰 표시 (=> 장치 너비에 표시)

(모바일, PC 웹 고려하기위함)

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

- 최소와 최대 화면 배율 설정해놓기

- initial-scale은 초기의 배율(0~1 사이의 값)

<meta name="viewport" content="user-scalable=no, width=device-width">

- 사용자가 크기 조절하기를 원치 않을 때 설정해놓기

보통 아래와 같이 설정

-> 장치의 너비(width)에 맞추고 초기 배율은 1.0으로 지정

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