디바이스별로 폰트에 크기가 달라요.

물론 해상도도 다르죠.

그런 부분을 해결하기 위해서  viewport 를 사용해요. 

 

 

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

​

위 와 같이 한줄을 넣으면 되고요.

 

 

viewport의 속성에 대해 알아보면 아래와 같습니다.

meta name="viewport" : 뷰포트 선언

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

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

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

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

user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)

 

모바일웹을 만들지 않고 pc 버전 사이트가 모바일에 꽉 차길 원하시는 클라이언트들이 있어요

개발자 입장에서는.. 상당히.. 쯥쯥

 

width=device-width  이 부분을 width=1000 이렇게 하면 1000픽셀 크기로 모든 기기에 맞춰요.

 

본문 컨텐츠 크기가 1200이라면 1200을 넣으시면 되고요