0. 환경
macbook-pro 13” 2012 mid / 10GB
1. veiwport
syntax
<meta name="viewport" content="name=value,name=value">
meta viewport tag는 viewport에 관하여 브라우저에게 지시
특히 width: 20%이 계산되는 것처럼 웹 개발자에게 CSS선언과 관한 layout viewport의 width 설정을 허용함
지시자(directive) 설명
이름-값 쌍으로 구성되며 총 6개의 지시자가 있다
| attr name |
내용 |
| width |
layout viewport의 width를 설정 |
| initial-scale |
페이지의 초기 zoom과 layout viewport의 width를 설정 |
| minimun-scale |
최소 zoom 단계 설정 (user가 얼마나 축소시킬 수 있는지) |
| maximun-scale |
최대 zoom 단계 설정 (user가 얼마나 확대시킬 수 있는지) |
| height |
layout viewport의 height를 설정 (작동안함, 게다가 height 설정은 이해안감.) |
| user-scalable |
확대 축소 여부 |
* Zoom은 처음 보일 화면의 크기를 나타내는 것 같음
device-width 값
width 지시자에 사용되는 특별한 값
이상적인 viewport의 width를 layout viewport의 width로 설정
device-height도 존재하나 작동 안함 (In theory there’s a similar device-height value, but it doesn’t seem to work.)
브라우저
일반적으로 브라우저는 3그룹으로 나누어짐
| 그룹 |
브라우저 |
내용 |
| 1 |
Android Webkit, IE |
심각한 버그가 도처에 널려있음, 그 버그가 비슷함 |
| 2 |
Safari |
landscape mode에서 portrait width 사용시 매우 드럽게 짜증나는 버그 있음 (width=device-width) |
| 3 |
Chrome, Opera, BlackBerry |
대체적으로 기능을 잘 지원하나, 버그에서 자유롭지 못함 |
2. 3가지 viewport
필요하면 2가지 viewport에 대한 기사를 다시 읽으래요. 이 내용읽을 때 필요하대요
최선의 viewport
디바이스마다 최선의 웹 페이지 크기를 주지만 최선의 viewport에 대한 시각은 디바이스마다 다르다
레티나급이 아닌 오래되거나 싼 디바이스 상에서 최선의 viewport는 화소(pixel)의 물리적 숫자와 동등하지만 필요조건은 아니다. 더 높은 화소를 가진 새로운 디바이스는 과거 이상적인 viewport를 유지해야 한다.
레티나든 아니든 4S까지 iPhone의 최선의 viewport는 320*480 이다. 이 크기는 그러한 iPhone들 상에서 웹 페이지를 위한 최선의 크기이기 때문이다.
이러한 viewport들 상에서 두 가지 중요한 점이 있다.
- layout viewport는 최선의 viewport 값으로 설정할 수 있다. width=device-width 지시자가 그러하다.
- 모든 크기 지시자는 최선의 viewport와 관련되어 있다. layout viewport의 width가 뭐든 관련되어 있지 않다. 그래서 maximum-scale=3는 최대 확대가 최선의 viewport의 300%라는 것을 의미한다.
최적의 viewport 크기 찾기
가끔씩 최적의 viewport크기를 읽을 수 있어서 유용하다.
페이지에 아래 태그를 적고 document.documentElement.clientWidth/Height 사용\
<meta name="viewport" content="width=device-width,initial-scale=1">
이 옵션이 아니면 최적의 viewport 크기를 알 수 없다.
또한 screen.width/height도 도움될 것임
그렇지만 오직 BlackBerry만 올바른 정보를 줄 뿐 다른 브라우저는 오락가락한다.
공개 질문: screen.width/height가 최적의 viewport 크기를 줄까?
Pro: 마지막 속성값은 유용한 값일 것이다.
Con: 디바이스 상에서 최적의 viewport 크기는 물리 화소와 동등할 필요는 없다.
호환가능한 최적의 viewport
| test |
최적의 viewport 크기 |
| iPhone |
320 X 480 |
| iPad |
768 X 1024 |
| Android Samsung |
400 X 640 |
| Android HTC |
360 X 640 |
| Chrome |
601 X 962 |
| Opera Presto |
240 X 320 |
| BlackBerry |
342 X 570 |
| IE |
320 X 480 |
슈뢰딩거 상태(맞지도 않고 틀리지도 않음), 값은 디바이스에 의존적, 그리고 모든 값은 분별 가능
| test |
width=device-width |
| iPhone |
portrait |
| iPad |
portrait |
| Android Samsung |
yes |
| Android HTC |
yes |
| Chrome |
yes |
| Opera Presto |
yes |
| BlackBerry |
yes |
| IE |
yes |
width=device-width는 layout viewport의 크기가 최적의 viewport 크기로 하는가?
Safari는 landscape와 portrait 모드에서 둘다 portrait width(320 or 768)가 적용
| test |
initial-scale=1 |
| iPhone |
yes |
| iPad |
yes |
| Android Samsung |
yes |
| Android HTC |
yes |
| Chrome |
yes |
| Opera Presto |
yes |
| BlackBerry |
yes |
| IE |
portrait |
initial-scale=1는 layout viewport의 크기가 최적의 viewport 크기로 하는가?
IE10은 landscape와 portrait 모드에서 둘다 portrait width(320)가 적용
| test |
screen.width/height |
| iPhone |
portrait |
| iPad |
portrait |
| Android Samsung |
no |
| Android HTC |
no |
| Chrome |
width |
| Opera Presto |
width |
| BlackBerry |
yes |
| IE |
no |
screen.width/height는 최적의 viewport 크기를 주나?
- safari는 항상 portrait이 최적의 viewport
- Chrome과 Oprea는 width는 올바름에도 이용가능한 height를 준다
- screen height - toolbar
Android와 IE는 screen상 물리 화소수를 준다
3. layout viewport의 width
페이지를 렌더링 하기 전, 브라우저는 layout viewport가 얼마나 넓은지 알 필요가 있다. width: 20%가 계산되는 것 처럼 CSS 선언을 viewport를 기준으로 한다.
다른 지시 없이도 브라우져는 width를 고른다. 테스트 된 8개 중 6개에서 브라우져는 980px를 BlackBerry와 IE는 1024px 이었다. 이건 슈뢰딩거의 상태다. 브라우져는 단지 결정할 뿐이다.
viewport meta 태그에서 width: 400이거나 다른 숫자 값을 사용할 때 layout viewport의 width는 그 숫자로 설정된다. 우린 이미 알고 있다.
하지만, Android WebKit과 IE의 최소 width는 320px이다. 320px 미만으로 작아지면 최적의 viewport width로 돌아간다.
layout viewport와 최적의 viewport가 동등해질 때가 있다. 그건 width=device-width 이거나 initial-scale=1일 때 발생한다. 하지만 Safari와 IE10에 버그가 있고 initial-scale을 사용해 잡기 때문에 복작하지만 일반적인 규칙이다.
최대 그리고 최소 크기 (Minimum and maximum dimensions)
layout viewport의 최대크기는 10,000픽셀이다. 브라우저가 그 크기만큼 작게 (zoom out)하지는 못하기 때문에 그 숫자를 완전히 믿지는 못한다. 하지만 여전히 공식적으로 받아들인다.
layout viewport의 최소크기는 최적의 viewport의 1/10 정도이고 최대 zoom level이다. (즉, layout viewport는 결코 visual viewport보다 작아질 수 없다)
예외: Android WebKit과 IE는 결코 320px 미만으로 작아지지 않는다.
양립가능한 layout viewport
| test |
Default layout viewport |
| iPhone |
980 |
| iPad |
980 |
| Android Samsung |
980 |
| Android HTC |
980 |
| Chrome |
980 |
| Opera Presto |
980 |
| BlackBerry |
1024 |
| IE |
1024 |
meta viewport 태그 없이 layout viewport의 기본 크기(dimensions)
슈뢰딩거의 상태, 어떤 값이든 그렇게 된다.
| test |
width=10000,minimum-scale=0.01 |
| iPhone |
10,000 |
| iPad |
10,000 |
| Android Samsung |
10,000 |
| Android HTC |
10,000 |
| Chrome |
10,000 |
| Opera Presto |
10,000 |
| BlackBerry |
10,000 |
| IE |
1024 |
최대 layout viewport의 width를 찾기 위해
10,000 이상 적용했을 때, 980px 기본으로 돌아온 Android Webkit을 제외하고 모든 브라우져는 10,000에 머무름.
| test |
width=5 |
| iPhone |
64/96 |
| iPad |
154/205 |
| Android Samsung |
incorrect |
| Android HTC |
incorrect |
| Chrome |
120/192 |
| Opera Presto |
48/64 |
| BlackBerry |
68/114 |
| IE |
incorrect |
최소 layout viewport width 찾기 위해해…
4. zoom
줌은 교활하다. 이론상으로 간단하다. 줌 요소는 사용자가 zoom in, zoom out 할 수 있는 줌 요소를 결정한다. 문제는 두 가지다
- 줌 요소를 직접 읽어낼 수 없다. 대신 visual viewport의 width를 읽어 낼 수 있고 줌 요소와 정반대의 관계를 가진다. 줌 요소가 커질 때,
참고
quirksmode-viewport
* 참고자료
Written with Dec7.
