현실감각 0% :: 'viewport tag' 태그의 글 목록

소스예제 퍼온거 2013. 10. 31. 19:19

웹페이지가 스마트폰에서 너무 작게 보일때!! 스마트폰용 html 웹페이지로 볼 수 있도록 사이즈 바꿔주는 스크립트!



회사일 중에 안드로이드 스마트폰 앱을 만들어서 직원에게 배포해야 할 일이 있었는데, 플레이스토어에서는 특정 기업에서만 사용하는 앱은 등록해주지 않는지 아무리 기다려도 앱 등록되었다는 얘기가 없이 무한 대기상태라서 답답한 마음에 그냥 서버에 올려놨다. 문제는 FTP 서버에다 그냥 올려놔서 다들 다운로드 받는데 어려움을 많이 격는다는 것... 그래서 웹페이지에다 간단하게 <A HREF="http:// 요놈 사용해서 링크 올려놓고 다운로드 받을 수 있게 해놨는데 단순하게 만들어놨더니만 스마트폰 웹브라우저에서는 정말 코딱지만하게 나오는 것이었다.(귀찮아서 디자인 그딴건 신경조차 안썼다..;;)





막 위 사진처럼 나와서 글씨 안보인다고 난리고..ㅠㅠㅠㅠㅠㅠㅠ(물론 확대하면 되긴 하지만... 그마저도 귀찮으신듯..ㅠㅠ) 그래서 스마트폰 웹브라우저에서도 잘 보이도록 만드려고 했는데 평소에 스마트폰 웹쪽엔 관심이 없는지라... 급하게 구글링!! 디자인까진 신경안쓰더라도 크게는 보이게 만들어놔야지...

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

David Calhoun이라는 분의 블로그인거 같은데 스마트폰 웹을 만들고자 하는 초보자들에게 기초적이면서도 유용한 정보가 많이 있는 것 같다.


아무튼 화면 크기를 맞춰주는 스크립트는... 바로 


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

검색해도 잘 나오지도 않고... 엄청 헤맸는데, 알고보니 별.거.없.다.. 그냥 width를 디바이스위드로 맞춰주라는 위 스크립트를 그냥 html 페이지 상단에 쑤셔넣으면 된다. 그럼 아래와 같이 스마트폰 화면에 맞게 나오는 모습을 볼 수 있다.