모바일웹 뷰포트 속성 설명~

모바일 웹 페지이 제작 시 알아 두면 좋은 태그...

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;">

width=device-width; 가로 화면 전환시 화면에 맞게 페이지 폭이 넓어지게 된다. 쓰지 않을 경우 화면이 폭에 맞추어 확대됨. device-width 옵션은 iPhone OS 1.1.1 이후 적용.

이 옵션으로 아이폰, 안드로이드 폰 등 해상도가 다른 디바이스에서도 짤리거나 넘치지 않도록 보정 된다. (가로 폭이 좁은 안드로이드 계열에서도 잘 보인다. 약간 날씬해 지는 느낌?)

initial-scale=1.0; 초기화면을 해당 비율로 확대하여 보여주는 옵션

maximum-scale=1.0; 확대할 수 있는 최대값 (범위 0~10.0) 디폴트값은 1.6

user-scalable=yes; 사용자가 화면을 확대할 수 있도록 허용

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/ > : 등록되는 웹 사이트의 아이콘 지정. 없으면 웹사이트 캡쳐화면이 아이콘으로 사용된다.

아이폰은 57×57 , 아이패드는 72×72, 아이폰4는 114×114 사이즈의 png 이미지를 사용한다. 가능하면 114×114 이미지로 만들어두면 아이폰에서 자동으로 크기 리사이즈를 한다.

rel 속성의 값을 apple-touch-icon-precomposed로 하면 아이폰의 아이콘 기본형태(둥근모서리)를 사용하지 않는다. 이 옵션은 안드로이드에서도 지원된다. 사이즈는 48X48

<link rel="apple-touch-startup-image" href="/startup.png">

: 화면 로딩시 스타트업 이미지 지정

<meta name="apple-mobile-web-app-capable" content="yes" />

: 브라우저의 UI(주소창)을 숨김

 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

: 상태바의 색상 지정(default (회색) , black , black-translucent ( 반투명 ))

@IM

하이투자증권
현대중공업의 대표 금융회사입니다.