검색결과 리스트
viewport에 해당되는 글 1건
- 2012.09.10 스마트폰용 모바일페이지를 위한 설정
글
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<!-- 화면사이즈 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- 홈 화면에 바로가기 만들었을 경우 주소 입력창 없애기 -->
<meta name="apple-mobile-web-app-capable" content="yes">
1. viewport 란 무엇인가?
스마프트폰은 기종별로 화면 크기가 다르다. 그렇다고 모든 단말기에 맞추어서 전용 버전을 개발해야 하는 것은 아니다. 화면 사이즈에 맞추어서 표시해주는 'ViewPort' 라는 기능을 이용하면 된다.
<meta> 태그로 ViewPort를 지정하면 자동으로 크기가 조절되는 기능이다.
2. viewport 사용법
표시 화면의 크기, 확대/축소 허용, 초기 표시 배율을 <meta> 태그에서 지정 할 수 있다.
<meta name="viewport" content="속성1=값1, 속성2=값2,..." />
VIewPort 속성
| 속성 | 기능 |
| width | 너비(픽셀) |
| height | 높이(픽셀) |
| initial-scale | 초기 배율(기본 꽉 찬 화면) |
| minimum-scale | 최소 배율(기본값: 0.25, 범위:0~10.0) |
| maximum-scale | 최대 배율(범위:0~10.0) |
| user-scalable | 확대/축소 여부 (yes/no) |
참조 : http://nimba.tistory.com/289
'WEB' 카테고리의 다른 글
| 25 Secrets of the Browser Developer Tools (0) | 2012.10.09 |
|---|---|
| google chart 및 실시간으로 chart변경 (0) | 2012.09.12 |
| MSXML2.XMLHttp.6.0 or MSXML2.ServerXMLHTTP를 이용해 사이트 소스를 얻을 때 한글 깨짐 방지 (0) | 2012.08.28 |
| 웹브라우저의 역사 (0) | 2012.08.16 |
| Eclipse에서 기존 프로젝트를 다른 프로젝트에 링크 (0) | 2012.08.06 |
RECENT COMMENT