meta 태그의 viewport 속성
1. 정의
- 최적화된 모바일 페이지를 만들기 위해선 meta 태그의 viewport 속성을 추가해야 한다
- 웹 표준은 아니지만 많은 브라우저 창에서 표준 처럼 사용
1) 문제
- 데스크 기반으로 만들어진 웹 페이지를 모바일에서 보면 작아보임
- 이유는 모바일 기본 뷰 포트가 960px 이기 때문에 브라우저가 고려안함
- 반응형 디자인의 예
a. 데스크 탑
b. nexus 5 크기(viewport 설정 시)
- 화면을 클릭하면 옆에 사이드 바가 나온다
c. viewport 비 설정시
- 전체 크기가 보인다.( 더 작아보임)
2) 해결
- <head>에 viewport를 설정 함으로써 모바일 화면에서도 자연스럽게 나오도록 한다
2. viewport 사용법
1) 기본 사용 <meta>
2) IE 10 에선 @viewport rule 사용한다
- 모든 브라우저에 적용을 원한다면 위 처럼 사용
3) 속성
meta name="viewport" : 뷰포트 선언
content="width=device-width" : 콘텐츠를 표현할 넓이
intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)
minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)
user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)
target-densitydpi=device-dpi : 모바일 해상도로 맞춰서 보여줌(안드로이드 지원)
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [Template] DropDownMenu - 드랍다운메뉴 (0) | 2017.01.08 |
|---|---|
| [HTML] 이전 웹 브라우저에서 HTML5 사용 (0) | 2016.12.19 |
| [CSS3] Transform - 위치, 모양 크기 지정 (0) | 2016.12.18 |
| [CSS] overflow-x /overflow-y (0) | 2016.12.18 |
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
리딩리드