My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다. AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.



kay
조회 수 1233 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

원문 주소 : http://chaospace.tistory.com/152


viewport란?


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

viewport설정방법


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

viewport속성값


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


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">x



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

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



결과화면 :


참고 사이트 :





?

List of Articles
번호 제목 글쓴이 날짜 조회 수
2 A 태그 옵션 kay 2015.10.21 559
» [담아온 글] 뷰포트 ( Viewport ) 이해하기 kay 2014.02.20 1233
Board Pagination Prev 1 Next
/ 1