메뉴 건너뛰기

검색창 닫기

HEUKMYO

Mobile

모바일 코딩을 위한 메타테그

2013.08.06 10:17 read.286

모바일에서 웹을 들어갈경우 컴퓨터로 사용하는것과 같은 모습으로 사용할 수가 있지만

모바일웹으로 코딩을 해야할 경우 사이즈에서 문제가 생기게 된다.

모바일은 웹과 달라 메타태그에서 설정을 해주어야 한다.


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


위 소스를 메타태그에 추가한뒤.

css에서 아래와 같은 스타일을 적용해주자.


* { margin: 0; padding: 0; -webkit-text-size-adjust:none; }


모바일 코딩을 하기 위해서는 위 설정은 기본으로 잡아야 한다.

[출처] 모바일 코딩을 위한 메타테그|작성자 무라마시


※ meta

*content="width=device-width"는 웹페이지의 가로를 모바일 가로사이즈에 맞춘다는 뜻

initial-scale=1은 화면을 초기화 할때 몇배율로 할 것인지 정합니다. 1로 한다면 딱 정상적인 배율로 보입니다.

maximum-scale=1은 손가락 두개를 쫙 벌려서 확대를 얼마나 할 수 있는지에 대한 부분입니다.
1로 하면 확대가 안되고 2로 하면 두배, 3으로하면 세배 확대가 됩니다.
minimum-scale=1은 반대로 손가락 두개를 오므려서 얼마나 축소할 수 있는지에 대한 부분입니다. 1로하면 축소가 안되고, 0.5는 50%축소가 됩니다.

user-scalable=no는 확대축소가 가능한지에 대한 부분입니다. 위에서 아무리 확대축소를 할 수 있게 해놓아도 여기서 no를 하면 안됩니다. yes를 하면 확대축소가 가능합니다.

target-densitydpi=medium-dpi는 안드로이드의 경우 사이트가 어떤 화면크기에 맞추어 개발되었는지를 명시해주는 태그입니다.

[출처] 모바일 앱코딩(필수삽입 및 이미지작업방법)|작성자 꼬무작님


※ -webkit-text-size-adjust

-webkit-text-size-adjust:none; - iphone 글자크기 자동조정 방지

-webkit-text-size-adjust:auto; - 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절

-webkit-text-size-adjust:120%; - 폰트크기를 지정된 사이즈로 변경한다.


주의사항

viewport설정의 "maximum-scale"에 대한 설정이 있어야하며 설정값이 1.0이하여야만 적용된다.


[출처] http://blog.naver.com/imse0109?Redirect=Log&logNo=30121838629


추가메뉴 목록
위로