1. 소개
CSS 2.1 [CSS21]에서는 초기 포함 블록을 연속 미디어의 경우 뷰포트의 크기로 정의합니다. 뷰포트는 일반적으로 디스플레이보다 크지 않으므로, 휴대폰이나 태블릿과 같은 작은 스크린의 기기에서는 데스크탑이나 노트북과 같은 큰 기기보다 작은 뷰포트가 제공됩니다.
안타깝게도, 많은 문서들이 역사적으로 더 큰 뷰포트를 기준으로 설계되어, 작은 뷰포트에서는 다양한 버그가 발생하는 경우가 흔합니다. 여기에는 의도하지 않은 레이아웃 줄바꿈, 잘린 콘텐츠, 어색한 스크롤 영역, 스크립트 오류 등이 포함됩니다. 이러한 문제를 피하기 위해 모바일 브라우저들은 일반적으로 데스크탑 브라우저의 일반적인 윈도우 크기(보통 980-1024px)를 모방한 고정된 초기 포함 블록의 너비를 사용합니다. 결과적으로 레이아웃은 이용 가능한 화면 크기에 맞게 축소되어 표시됩니다.
이 방식은 위 문제를 완화하지만, 축소됨에 따라 CSS 픽셀의 크기가 CSS 2.1에서 권고된 것보다 더 작아집니다. 따라서 사용자는 콘텐츠를 편하게 보기 위해 확대(zoom)가 필요할 수 있습니다.
하지만 작은 뷰포트에서도 잘 작동하도록 설계된 사이트에서는 이러한 완화 조치가 불필요합니다.
이 명세서는 구현 관점에서 작성되어 읽기에 다소 어렵다고 여겨질 수 있습니다. 다양한 독자층을 위해 더 이해하기 쉽게 하려면 상당한 편집 작업이 필요합니다. 또한 여러 js API가 참조하는 뷰포트가 무엇인지 명확하게 해야 합니다. 이러한 이슈에 대한 더 좋은 논의는 이 블로그 글(ppk)을 참조하세요.
이 명세와 관련 명세들에 대한 여러 이슈들이 이 보고서에 정리되어 있습니다.
2. 뷰포트
CSS 2.1에서 뷰포트는 연속 미디어를 위한 사용자 에이전트의 기능이며 연속 미디어의 초기 포함 블록을 설정하는 데 사용됩니다. 페이지 미디어의 경우, 초기 포함 블록은 페이지 영역을 기반으로 합니다. 페이지 영역은 @page 규칙으로 설정할 수 있습니다.
이 명세는 사용자 에이전트(UA)가 제공하는 뷰포트의 크기를 재정의할 방법을 도입합니다. 따라서 초기 뷰포트와 실제 뷰포트의 차이를 정의해야 합니다.
- 초기 뷰포트
- 이것은 UA의 윈도우(또는 표시 영역)에 의해 주어진 기본 뷰포트가 UA 또는 작성자 스타일로 재정의되기 전을 의미합니다. 초기 뷰포트의 크기는 윈도우 또는 표시 영역의 크기에 따라 달라집니다.
- 실제 뷰포트
- 이것은 뷰포트
<meta>태그 처리 후의 뷰포트입니다.
실제 뷰포트를 레이아웃 뷰포트로 하고, visual viewport를 정의하세요.
만약 실제 뷰포트가 윈도우나 표시 영역 안에 들어가지 못하는 경우(즉, 실제 뷰포트가 초기 뷰포트보다 크거나 확대 비율로 인해 실제 뷰포트의 일부만 보이는 경우), UA는 스크롤 또는 패닝 메커니즘을 제공해야 합니다.
문서의 기본 방향이 ltr인 경우 최초에는 실제 뷰포트와 윈도우(표시 영역)의 좌상단 모서리가 정렬되는 것이 권장됩니다.
rtl인 경우에는 우상단 모서리가 정렬되어야 합니다. 문서의 기본 방향은 HTML 또는 XHTML 문서에서
첫 번째 <BODY> 요소의 direction 속성의 계산값으로 정의됩니다.
다른 문서 유형에서는 루트 요소의 계산된 direction 값이 사용됩니다.
3. 뷰포트 <meta> 요소
3.1. 속성
뷰포트 <meta> 요소에서 인식되는 속성들은 다음과 같습니다:
widthheightinitial-scaleminimum-scalemaximum-scaleuser-scalableinteractive-widget
3.2. 파싱 알고리즘
아래는 아이폰의 Safari로 테스트한 <meta> 태그의 content 속성 파싱
알고리즘입니다.
테스트는 iPhone OS 4가 탑재된 iPod touch로 진행했습니다. 브라우저 UA 문자열:
"Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X;
en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5
Mobile/8A293 Safari/6531.22.7". 사용된 의사코드 표기는 [Algorithms]에서 사용하는 형식을 따릅니다.
whitespace 클래스에는 다음 문자가 포함됩니다 (ascii):
- 수평 탭 (0x09)
- 줄 바꿈 (0x0a)
- 캐리지 리턴 (0x0d)
- 공백 (0x20)
속성과 값 쌍의 구분자로, Safari 구현에서는 콤마(,)를 인식합니다. 일부 구현체는 콤마와 세미콜론(;)을 모두 지원합니다. 그래서 기존 콘텐츠에서는 콤마 대신 세미콜론을 사용하는 경우도 있습니다. 모든 UA에서 정상 동작을 보장하려면 저자는 콤마를 사용하는 것이 좋지만, 구현자는 기존 콘텐츠의 상호운용성을 위해 둘 다 지원할 수 있습니다.
separator 클래스에는 다음 문자가 포함됩니다 (ascii). 콤마가 기본 구분자이고 세미콜론은 선택적입니다:
- 콤마 (0x2c)
- 세미콜론 (0x3b)
Parse-Content(S) i ← 1 while i ≤ length[S] do while i ≤ length[S] and S[i] in [whitespace, separator, '='] do i ← i + 1 if i ≤ length[S] then i ← Parse-Property(S, i) Parse-Property(S, i) start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i property-name ← S[start .. (i - 1)] while i ≤ length[S] and S[i] not in [separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i while i ≤ length[S] and S[i] in [whitespace, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 property-value ← S[start .. (i - 1)] Set-Property(property-name, property-value) return i
Set-Property는 나열된 속성 이름과 대소문자를 구분하지 않고
일치시킵니다.
property-value 문자열의 해석 방법은 다음과 같습니다:
-
property-value의 접두사가strtod를 통해 숫자로 변환될 수 있으면, 그 값이 사용됩니다. 나머지 문자열은 무시됩니다. - 위 방법으로 숫자로 변환할 수 없는 경우, 전체
property-value문자열이 다음 문자열들과 대소문자 무시하고 비교됩니다:yes,no,device-width,device-height - 만약 어떤 문자열과도 일치하지 않으면, 그 값은 알 수 없음이 됩니다.
3.3. extend-to-zoom
viewport meta 태그의 extend-to-zoom 동작 규정 필요
3.4. interactive-widget
visual viewport 정의를 CSSOM-View에서 이 명세로 이동 필요.
interactive-widget 속성은 인터랙티브 UI 위젯이 페이지 뷰포트에 미치는 영향을 지정합니다. 이
속성은 위젯이 뷰포트를 오버레이할지,
아니면 위젯이 표시될 때 뷰포트가 완전히 보이도록 축소할지를 정의합니다.
인터랙티브 UI 위젯은 사용자가 입력을 제공할 수 있도록 하는 임시 사용자 에이전트 또는 OS UI입니다.
interactive-widget의 유효 값과 연관된 뷰포트 리사이징 동작 목록은 다음과 같습니다:
overlays-content- 인터랙티브 UI 위젯은 리사이즈해서는 안 됩니다.
초기 뷰포트나
visual viewport를 리사이즈하지 않습니다. 사용자 에이전트는
VirtualKeyboard.overlaysContent를true로 설정한 것과 동일한 단계를 수행해야 합니다. resizes-content- 인터랙티브 UI 위젯은 리사이즈해야 합니다. 초기 뷰포트가 위젯에 의해 리사이즈됩니다.
resizes-visual- 인터랙티브 UI 위젯은 리사이즈해야 합니다. visual viewport만 리사이즈를 해야 하며, 초기 뷰포트는 리사이즈하지 않아야 합니다.
interactive-widget에 값이 없거나 잘못된 값이 설정된 경우, 기본값으로 resizes-visual 동작이 사용됩니다.
인터랙티브 위젯에 의해 뷰포트를 리사이즈할 때는, 뷰포트 사각형과 위젯의 OS 보고 바운딩 사각형이 겹치는 부분만큼 뷰포트에서 빼줍니다. 이 결과가 비직사각형 뷰포트가 된다면, 동작은 UA가 정의한 대로입니다.
3.4.1. virtualKeyboard.overlaysContent와의 상호작용
[VIRTUAL-KEYBOARD]는
overlays-content 동작을
VirtualKeyboard.overlaysContent
속성을 통해 명령형(Imperative)으로 적용하는 API를 제공합니다. 이 속성은 interactive-widget에서 설정한 값을 덮어씁니다. 즉:
VirtualKeyboard.overlaysContent가
true로 설정되면, UA는 인터랙티브 위젯 리사이즈 동작 결정 시 interactive-widget의 값을 무시해야 합니다.
VirtualKeyboard.overlaysContent가
false로 설정되면, UA가 interactive-widget의 값을 따라야 하며(값이 없다면 기본 동작 사용),
이를 근거로 인터랙티브 위젯 리사이즈 동작을 결정해야 합니다.
VirtualKeyboard.overlaysContent
값을 가져오는 경우,
이전에 설정한 값만 반환해야 합니다.
VirtualKeyboard.overlaysContent는
interactive-widget=overlays-content가 <meta> 태그로 설정되어 있어도 항상 false를 반환합니다.
부록 A. 변경 사항
이 부록은 비규범적입니다.
2016년 3월 29일 작업 초안 이후
- 뷰포트 메타에 interactive-widgets 속성 추가
- @viewport 규칙 삭제
- 명세 이름을 device-adapt에서 css-viewport로 변경
- CSSViewportRule을 Window에 노출
2011년 9월 15일 최초 공개 작업 초안 이후.
- 다양한 편집상의 개선 및 설명 추가
- OM 인터페이스 추가
- meta viewport 구분자로 세미콜론 추가
- UA 스타일시트 섹션 생성
- orientation 속성 존중 시점에 대한 권고 추가
- 해상도(resolution) 기술자 지원 삭제
- width/height와 zoom 구분, 메타 뷰포트 변환의 extend-to-zoom 값 도입
- @viewport와 @media의 상호작용에 대한 규범적 규칙 명시
- <viewport-length> 및 zoom 값에 0 허용
- device-width/height 지원 삭제
- @viewport는 최상위 문서에만 적용
- [CSS3-CONDITIONAL]을 @media 중첩 기준으로 사용(CSS21 대신)
- @viewport 삭제