Viewport 이해하기Viewport 이해하기

Posted at 2010.10.28 17:19 | Posted in Programming/CSS
viewport란?

모바일 브라우저 중 webkit을 기반으로 한 녀석들은 PC의 브라우저 윈도우에 
해당하는 Viewport라는 녀석이 있습니다.
기본적인 뷰포트의 넓이는 980px로 설정되어 있어서,  폰에서 보여질 컨텐츠를 500px로 
만들었다면 480px의 여백이 생기도 페이지의 넓이는  980px이 됩니다. 
정리하자면 아이폰의 경우 320 x 480px 의 화면사이즈를 가지기 때문에 980px과 비교하면 
PC화면의 약 1/3의 크기로 보이게 됩니다.

viewport설정방법

viewport를 설정하려면 head에 meata태그를 추가하면 됩니다.
<meta name="viewport" content="속성값">

viewport속성값

 속성 내용 단위  기본값  허용범위  특이사항 
width viewport의 넓이 px 980px  200 ~ 10,000  device-width로 지정가능 
height viewport의 높이 px 가로화면비율에서
계산된 값 
200 ~ 10,000 device-height로 지정가능 
initial-scale 초기 배율값 승수지정
120%
= 1.2 
viewport에서
계산된 값  
0 ~ 10   
minimum-scale 승수 지정 승수  .25  0 ~ 10 
maximum-scale 승수 지정 승수 1.6 0 ~ 10   
user-scalable 확대,축소 지원여부 yes, no yes    

viewport의 넓이를 400px하고 시작 비율을 2로 적용한 코드;
<meta name="viewport" content="width=400px, initial-scale=2">

viewport의 확대축소를 지원하고 싶지 않을 경우 :
<meta name="viewport" content="width=400px, user-scalable=no, initial-scale=2">


실습하기

시작시 content의 크기를 2.3배로 보이게 하는 코드 :
<meta name="viewport" content="width=320px, initial-scale=2.3">

결과 ( 웹 브라우저는 viewport가 무시됨 )

user-scalable을 이용해 content스케일 조절을 막은 코드 :
<meta name="viewport" content="width=320px, user-scalable=no, initial-scale=1">

결과화면 :


참고 사이트 :

viewport : 뷰포트

'Programming > CSS' 카테고리의 다른 글

CSS !important의 뜻  (0) 2011.04.15
CSS를 이용한 말풍선 만들기  (0) 2011.02.02
[링크]CSS3로 버튼만들기  (0) 2011.01.05
CSS3애니메이션 툴 Sencha Animator  (0) 2010.11.04
Viewport 이해하기  (1) 2010.10.28
멀티스크린을 위한 MediaQuries  (1) 2010.10.28
  1. 정리해주신글 보고 잘 이해했습니다.
    감사합니다.

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기