2012.02.05 18:08
     

난데없이 요상한 곳(?)에 불이 붙어서 요즘 루비 온 레일즈(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)  참고 사이트
Mittm

Android App

Posted by kkamagui

댓글을 달아 주세요

  1. Favicon of http://blog.wimy.com BlogIcon zelon 2012.03.05 18:57  댓글주소  수정/삭제  댓글쓰기

    웹 역시 재미있지 ㅋㅋㅋㅋ '반응형웹' 으로 검색하면 아마 더 많은거 나올거야. 화면 크기에 따라서 레이아웃도 자동으로 바꾸고 이런것도 되어서... http://box.wimy.com 에 적용해봤는데 크기 조절함 해봐 ^^

    • Favicon of https://kkamagui.tistory.com BlogIcon kkamagui 2012.03.08 19:28 신고  댓글주소  수정/삭제

      꺄옥~ @0@)-b
      역시 횽은 앞서가시는군요. ㅠㅠ

      웹 세상의 꼬꼬마라서 아는 게 너무 없네요. ㅠㅠ
      좋은 팁 감사드립니다. ;)

  2. sen 2014.03.04 14:16  댓글주소  수정/삭제  댓글쓰기

    유용한 정보 감사합니다~