윈도우즈8 터치 중심의 사이트 구축에 대한 지침
Windows 8 Consumer Preview의 IE10은 웹에서 빠르고 유연한 멀티 터치 경험을 지원합니다. IE10에서 구동되는 대부분의 사이트는 별도의 변경 없이도 우수한 터치 경험을 지원합니다. 이 글에서는 터치 기능을 사용하는 고객이 여러분의 사이트를 '가장 효과적으로' 사용할 수 있도록 하기 위한 간단한 지침을 제공합니다.
브라우저에서 사이트와 원활하게 작동하는 기본 터치 동작을 구성하십시오.
사용자는 터치를 사용하여 사이트를 이동하고 확대/축소할 수 있어야 합니다. 따라서 브라우저는 터치 이동, 손가락 모으기 및 두 번 탭을 기본적으로 사용하며 이러한 상호 작용에 대한 이벤트를 보내지 않습니다. 사이트에서 이러한 상호 작용에 대한 특정 기능을 제공해야 하는 경우 원하는 기본 동작(있을 경우)만 제공하도록 IE10을 구성해야 합니다.
사용자가 요소를 터치하면
-ms-touch-action CSS 속성에 따라 IE10에서 제공하는 기본 동작이 결정됩니다. -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
아래 표에 다섯 가지 가능한 값이 나와 있습니다.
| 값 | 설명 |
|---|---|
auto |
브라우저가 요소의 동작을 결정합니다. 이는 -ms-touch-action의 기본값입니다. |
none |
허용되는 기본 동작이 없습니다. |
manipulation |
이동, 손가락을 모아서 축소/확대 및 살짝 밀어서 앞/뒤로 이동만 허용됩니다. |
double-tap-zoom |
두 번 탭하여 확대/축소만 허용됩니다. |
inherit |
요소가 해당 상위 요소에서 -ms-touch-action 값을 상속합니다. |
예를 들어 캔버스 그리기 응용 프로그램에서는 다음을 사용할 수 있습니다.
canvas {
-ms-touch-action: double-tap-zoom;
}
이 구성을 사용할 경우 사용자는 두 번 탭하여 캔버스 요소로 확대할 수 있지만 게임 요소를 손가락으로 살짝 밀면 페이지가 이동하는 대신 캔버스로 이벤트가 전송됩니다.
이젠 외부 입력 장치에 신경도 써야하는군요..
댓글 3개
게시판 목록
자유게시판
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 |
 thisgun |
1주 전 | 10 | |
| 199478 |
 Gothrock |
3개월 전 | 257 | |
| 199477 |
Modify
|
3개월 전 | 257 | |
| 199476 | 3개월 전 | 277 | ||
| 199475 | 3개월 전 | 404 | ||
| 199474 | 3개월 전 | 274 | ||
| 199473 | 3개월 전 | 238 | ||
| 199472 | 3개월 전 | 578 | ||
| 199471 | 3개월 전 | 218 | ||
| 199470 | 3개월 전 | 271 | ||
| 199469 | 3개월 전 | 316 | ||
| 199468 | 3개월 전 | 318 | ||
| 199467 | 3개월 전 | 162 | ||
| 199466 | 3개월 전 | 273 | ||
| 199465 | 3개월 전 | 229 | ||
| 199464 | 3개월 전 | 221 | ||
| 199463 | 3개월 전 | 184 | ||
| 199462 | 3개월 전 | 327 | ||
| 199461 | 3개월 전 | 235 | ||
| 199460 | 3개월 전 | 352 | ||
| 199459 | 3개월 전 | 250 | ||
| 199458 | 3개월 전 | 182 | ||
| 199457 | 3개월 전 | 334 | ||
| 199456 | 3개월 전 | 294 | ||
| 199455 | 3개월 전 | 274 | ||
| 199454 |
 DSKim |
3개월 전 | 198 | |
| 199453 | 3개월 전 | 333 | ||
| 199452 | 3개월 전 | 201 | ||
| 199451 | 3개월 전 | 478 | ||
| 199450 | 3개월 전 | 378 | ||
| 199449 | 3개월 전 | 303 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기