본문 바로가기
html

[HTML5] 반응협웹을 구현하기위한 메타태그 뷰포트

by 알찬 퍼블리셔 2019. 4. 8.
728x90
반응형
<meta name="viewport" content="width=device-width, user-scalable=no">



모바일 우선!
viewport를 선언하지 않으면 미디어쿼리로 반응형 웹으로 제작하더라도 
모바일 기기에서 제대로 작동하지 않음

* width 가로 크기
- 숫자로 크기를 지정할 수도 있음
- device-width 로 값을 지정할 경우 기기의 화면 크기에 맞춰짐
height=device-height 값으로 세로크기의 비율도 지정할 수 있음.

* initial-scale 로드되었을 때 줌 레벨 
1.0 (= 100%)

* maximum-scale 최대 줌 레벨 지정
기본값 0.25

* minimum-scale 최소 줌 레벨 지정
기본값 1.6

* user-scalable 확대축소 가능한지 yes, no 값으로 지정 
기본값 yes
no값으로 설정하면 input영역 선택시 확대되는 것을 막고, 사용자가 화면을 확대, 축소하는 것을 방지한다.

728x90
반응형

댓글