give_it
접속 : 1643   Lv. 44

Category

Profile

Counter

  • 오늘 : 13 명
  • 전체 : 861666 명
  • Mypi Ver. 0.3.1 β
[HTML5] HTML5 뷰포트 (2) 2012/11/10 AM 11:59



test.html을 스마트폰에서 표시하면 글자 크기가 매우 작게 표시됩니다.
글자 크기는 조정이 가능하지만 스마트폰 해상도가 가지각색이라는 점이 함정...!
그래서 뷰포트라는 기능을 사용하겠습니다.






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

P { font-size : 12px; }



IU Hello, HTML5







뷰포트 적용후 적절한 크기로 표시됩니다.
뷰포트의 사용법

<-meta name = "viewport"
content = "속성1=값1, 속성2=값2, ..."/>

속성
width : 너비
height : 높이
initial-scale : 초기 배율
minimum-scale : 최소배율
maximum-scale : 최대 배율
user-scalable : 사용자가 확대/축소 할 수 있는지 여부

EX) 너비를 320px으로 고정하고, 확대/축소 불가
<-meta name = "viewport" content = "width=320, user-scalable=no"/>

신고

 

김모던    친구신청

ㅋㅋㅋㅋㅋㅋ 입력테스트 ㅋㅋㅋㅋ

InYourS2    친구신청

혼자공부하시나봐요 ㅎㅎ
X