View Port (뷰포트 설정)

View Port(뷰포트)

뷰포트란 전체 웹 페이지 가운데 브라우저 창에 보이는 부분을 말한다.

창크기를 조절해서 뷰포트를 크거나 작게 만들 수 있다. 

모바일 브라우저에 대응하는 html문서의 head안에 veiwport를 설정한다.

뷰포트는 브라우저와 해상도에 따라 다르게 설정한다.

<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 ( 반투명 ))

/* CSS로 글자가 확대 안하게 지정하면 글자 크기도 고정된다. */
p {  -webkit-text-size-adjust: none;  }

Jaehee's e-room