메타 태그(Meta Tag)를 이용해서 내 웹페이지를 모바일 브라우저에 예쁘게 표시하기

난데없이 요상한 곳(?)에 불이 붙어서 요즘 루비 온 레일즈(Ruby On Rails)로 간단한 웹페이지를 만들어 보고 있습니다. ^^;;; 그래봤자 루비 온 레일즈 사이트에 있는 예제를 보고 끄적거리는 수준입니다만, 제 손으로 만든 게 돌아가는 걸 보니 정말 신기하네요. 웹은 돌아가는 것이 눈에 바로 바로 보여서 정말 짱인 것 같습니다. ㅎㅎ

그런데 만든 웹페이지를 스마트폰으로 들어가보니... 글자가 점처럼 보일 정도로 광활하게 나오더군요. 이런... ㅠㅠ 그래서 어떻게 하면 스마트폰에서도 잘 보일까 싶어서 구글 검색을 하던 도중 메타 태그(Meta Tag)를 사용하면 된다는 것을 알았습니다. :) 아래처럼 말이죠.

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

위의 각 항목은 아래와 같은 의미를 가지고 있습니다.

- width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐(ex, 300px)
- initial-scale=1.0 : 페이지 로딩시 확대비율
- maximum-scale=3.0 : 최대확대비율
- minimum-scale=0.5 : 최소축소비율
- user-scalable=yes : 사용자의 확대보기 허용 여부(no/yes)


위의 태그를 넣어주고 모바일 보기 모드일 때 가로 폭을 좀 줄여줬더니 스마트폰에서도 나름대로 볼만한 크기로 잘 나오는군요. ㅎㅎ
그럼 좋은 하루 되세요 ;)

ps)  참고 사이트

http://www.readability.com/articles/rw1trgtj
http://blog.xiles.net/308