모바일 meta viewport 기본설정

viewport  필요한 이유

모바일 브라우저(사파리, 크롬 등)는 기본 정책으로 Default 뷰포트 너비를 980px으로 책정하고 화면에 맞게 비율을 줄여서 보여준다.

 

이 때문에 PC 환경에서 제작된 웹사이트는 모바일 환경에서 확인했을 때는 내용이 작아져 버리는 상황이 생김

 

다시 말해 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것이다.

따라서 웹 사이트를 만들 때 뷰포트에 대한 설정을 해주어야 이러한 문제를 해결하고, 반응형 웹사이트를 제대로 동작시킬 수 있다!

 

가장 많이 사용하는 meta viewport 기본설정 👍

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

 

width=device-width : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언)

intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)

minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)

maximum-scale=1 : 최대 크기 설정(기본값 : 1.6, 최대 배율 범위 : 0~10.0)

user-scalable=no : 확대사용 여부 (no로 설정하면 아이폰 input 박스 포커스 시 발생하는 확대기능 막을 수 있음)