[모바일 웹]이미지, 폰트 크기를 디바이스에 맞추기

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

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)

 

처음 모바일웹을 작성 할 때 애먹었던 게 폰트와 이미지 사이즈였다. 수많은 모바일 화면 크기를 어떻게 알고 각각의 이미지 사이즈를 변경할까 고민이 컷다. 하지만 viewport를 설정하는 태그 한 줄이면 해결이 가능했다. 보여지고 있는 콘텐츠를 화면에 어떻게 보여질 것인가 설정하는 meta 태그였다. PC 화면 기준으로 이미지를 작성하도 이미지나 폰트를 감싸고 있는 태그의 영향을 받아 사이즈를 알아서 변경해 준다.

<div style="width:50%; margin:auto"><img src="image.gif"></div>

이런 태그가 있을 때 image.gif가 div의 폭보다 크다면 image.gif의 크기는 div의 가로폭에 맞춰서 리사이징이 된다. 하지만 폰트의 경우 이렇게 리사이징이 되다보면 너무 작게 보여질 때가 있다. 이럴 때가 내가 지정한 사이트에 맞춰서 보여지도록 할 필요가 있다.

 

* { -webkit-text-size-adjust:none; max-width:100%; }

style 설정 할 때 페이지 상단에 딱 한 번만 넣어주자. 위의 viewport 작성시 maximum-scale=1 값으로 되어 있어야 한다.

* {-webkit-text-size-adjust:auto}
auto : webkit을 선언하지 않았을 때와 같은 값이다. 텍스트 크기는 화면폭의 영향을 받는다.
 * {-webkit-text-size-adjust:none}
none : 폰트의 크기가 화면 폭에 영향을 받지 않는다.

 

max-width:100%;는 일부 swipe 스크립트가 적용 안 될 수 있으니 그럴 경우에는 img 태그에만 적용하시기 바랍니다.

출처 : http://ziumb.tistory.com/51