블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'viewport'에 해당되는 글 1건

  1. 2013.04.16 [모바일 웹] 모바일 웹(앱) 뷰포트(Viewport) 설정하기



 일반적으로 모바일 브라우져에서 URL주소를 입력하고, 사이트에 접근해보면 페이지 전체가 축소되어 보여질 것이다. 이것은 페이지의 내용이 스크린 사이즈보다 클 경우를 대비해서 브라우저가 자동으로 축소모드로 랜더링하기 때문이다. <meta>태그를 사용하면 페이지의 초기 비율과 최대/최소 비율, 그리고 사용자에 의한 스케일 조정 여부등을 설정할 수 있다.

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


위 예제와 같이 메타(meta)태그의 이름(name)에 뷰포트(viewport)라고 지정되어 있으면 이는 스케일을 인식한다. 그리고 content라는 속성에 스케일링에 대한 내용을 기술하면 되다. Content속성 기술 할 수 있는 주요 내용은 아래와 같다.

Initial-scale

페이지가 처음 로딩될 때의 화면 확대 비율

Maximum-scale

최대 확대 비율 (0~1.0)

Minimum-scale

최대 축소 비율 (0~1.0)

User-scaleable

사용자가 줌으로 확대나 축소에 대한 가능여부 (yes,no)

width

너비(필셀) (device-width 디바이스 너비)

height

높이(필셀) (device-height 디바이스 너비)


(참고 비율 1.0 100%를 의미한다.)


Posted by happydong
, |