모바일 뷰포트(viewport)

1. 뷰 포트

- 모바일에서 뷰 포트가 설정되지 않을 경우 풀브라우징

2. 뷰 포트 설정

<meta name="viewport" content="width=device-width, 

initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=no">

initial-scale : 초기 비율

minimum-scale : 최소 축소 비율

maximum-scale : 최대 확대 비율

user-scalable : 확대 축소 가능 여부

※ 모바일에 맞게 1:1로 나오는 뷰포트

- 모바일에서 전체화면으로 맞추지 말고 모바일에 맞게 1:1로 나오게끔 처리하는 메타태그.

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

width 속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 width=600라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있는데, device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 height와 device-height 값들이 유용하게 사용될 수 있다.)

initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. maximum-scale, minimum-scale, 그리고 user-scalable 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정한다.

3. 레티나 디스플레이

<meta name="viewport" content="width=device-width;">

- 모바일 기기의 가로 해상도가 1080이라고 viewport가 width를 1080으로 인지하지 않는다.

- 갤럭시s4와 갤럭시s5는 density가 3.0으로 밀도가 3배. device-width는 360px 이지만 밀도가 3배라서 1080px의 해상도라고 표현한다.

- 레티나 디스플레이는 일반 디스플레이의 2배, density 2.0 밀도를 가진다. 그렇기때문에 아이폰5s의 경우 해상도는 640*1136이지만, 밀도가 2배이기 때문에 viewport가 인지하는 사이즈는 320*568가 된다.

- 기기마다 다른 뷰포트 확인 http://viewportsizes.com/

4. 아이폰 용 프로퍼티 webkit-text-size-adjust

webkit-text-size-adjust

- 글자크기 자동조정 관련 프로퍼티

- auto, %, none

none: 글자크기 자동조절 방지

auto : 화면 폭에 맞춰 텍스트 자동 조절 (기본)

n% : 폰트 크기를 지정된 숫자의 %만큼 변경

- 뷰포트의 maximum-scale의 값이 0.1 이하일 경우에만 적용된다.

아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기도 바뀌는데 이것을 막는 프로퍼티가 text-size-adjust이다.

1) auto

html { -webkit-text-size-adjust: auto; }

화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다.

자동으로 조절한다는 것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다.

2) none

html { -webkit-text-size-adjust: none; }

텍스트의 크기를 자동으로 조절하지 말라는 뜻이다.

대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리를 사용하여 좀더 세밀하게 조절해서 사용하고 위의 속성을 사용하여 자동으로 조절하지 못하게한다.

3) percentage

html { -webkit-text-size-adjust: 100%; }

이것은 폰트크기를 명시적으로 지정해주는 것이다.

이 방법도 경우에 따라 자주 사용하는 방법이다. 명시적으로 100%를 주어 모든 디바이스에서 동일하게 보여주게 하는 방식이다. 물론 크게도 가능하고 작게도 가능하다.

4) inherit

상속되는 경우로 부모요소의 속성값을 상속받아 적용되는 형식이다.

text-size-adjust의 기본값은 none, 이 속성은 표준이 아니므로 벤더를 넣어서 사용해야 한다.

apmsetup을 자신의 컴퓨터에 깔아 서버로 만들고 ,자신이 만든 파일을 모바일에서 접속해 확인 가능.