랜더링 사이즈 조절하기.(meta viewport 태그)

자신이 만든 페이지를 모바일 기기에서 열어본적이 있는가?

웹에선 잘나오는 이런화면도. 모바일에서는

 

이런식으로 자주 작게..나오는 현상이 발생한다.

이럴때 사용하는 태그가

meta태그의 viewport이다.

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

이렇게 한줄만 넣어주면,

 

모바일 화면에 맞춰서 나오게 된다.

또 중요한게

user-scalable인데, yes를 주면 사용자가 기기에서 화면크기를 줄이거나 확대할수있다.