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

출처 : aboooks.tistory.com/352

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

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">