모바일 viewport 관련 내용

-----------------------------------------------------------------------------------------------

출처: http://danahae.cafe24.com/blog/

-----------------------------------------------------------------------------------------------

 

모바일 viewport 관련

넓이가 320px 일때 아래 viewport를 사용
<meta content=”user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,target-densitydpi=medium-dpi” name=”viewport” >

디자인 넓이가 480px or 640px로 넘어올때 아래를 사용하면 된다고 하는데
<meta content=”user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width,target-densitydpi=medium-dpi” name=”viewport” >
<meta content=”user-scalable=yes, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width,target-densitydpi=medium-dpi” name=”viewport” >

위의 것은 갤럭시에서 제대로 안나오는데 "user-scalable=yes" 이렇게 바꾸면
갤럭시에서도 잘 나온다고 한다.
정확한 이유는 아직 모르지만 meta테그의 속성들을 살펴보면 아래와 같다.

ㅇ initial-scale: 초기값으로 설정할 줌 배율.
ㅇ maximum-scale: 최대값으로 설정할 줌 배율.
ㅇ minimum-scale: 최소값으로 설정할 줌 배율.
ㅇ 위의 3가지를 모두 1로 주면 축소나 확대가 안된다.
ㅇ user-scalable: 유저가 배율을 축소/확대할 수 있는지 여부 결정.
ㅇ width=device-width: 초기 넓이을 모바일장비가 지원하는 넓이만큼으로 설정.
ㅇ height=device-height: 초기 높이준을 모바일장비가 지원하는 높이만큼으로 설정.