상호 작용 미디어 기능 및 잠재력 (잘못된 가정)

이 기사는 2015 Dev.opera 조각의 크게 확장 된 업데이트 인 미디어 쿼리 레벨 4 상호 작용 미디어 기능 ( pointer , hover , any-pointer , any-hover )을 둘러싼 오해를 명확하게합니다. 원래 기사는 any-hover: none ; 이 버전은 최신 작업 초안과 일치하며 브라우저 구현의 불일치를 해결합니다 (현재 테스트 결과 및 관련 버그 보고서 참조).

Media Queries Level 4는 사용자 입력 장치를 기반으로 웹 사이트 스타일 및 기능 ( window.matchMedia 를 통해 CSS Interactivity 또는 JavaScript 동작)을 조정하는 것을 목표로합니다. 일반적으로 잘 지원되는 반면 구현 변동은 지속됩니다.

일반적인 사용 사례는 터치 스크린 대 마우스/스타일러스 사용을 기반으로 제어 크기 조정 또는 조건부로 호버 기반 메뉴를 활성화해야합니다.

 <code>@media (pointer: fine) { /* Mouse or stylus: small controls okay */ } @media (pointer: coarse) { /* Touchscreen: larger touch targets */ } @media (hover: hover) { /* Enable hover menus */ } @media (hover: none) { /* Disable hover menus */ }</code>

개발자는 종종 터치 감지를 위해 이러한 기능을 활용하며 일반적으로 pointer: coarse 감지 될 때 터치 이벤트를 듣습니다.

 if (wind
 / * 거친 포인터 : 터치 이벤트 듣기 */
 target.addeventListener ( "터치 스타트", ...);
} 또 다른 {
 / * 그렇지 않으면 마우스/키보드 이벤트 사용 */
}

그러나이 접근법은 단순하고 기능의 목적을 오해합니다.

1 차 입력 제한

pointer 와 hover 기본 포인터 입력의 특성 만 드러납니다. 이는 사용자의 실제 기본 입력, 특히 흐릿한 장치/입력 라인과 다를 수 있습니다. 결정적으로 이러한 기능은 키보드 전용 사용자를 감지 하지 않습니다 . 따라서 쿼리 결과에 관계없이 키보드 접근성을 확인하십시오.

Bluetooth 마우스가있는 전화는 사용자가 주로 마우스를 사용하고 있음에도 불구하고 pointer: coarse and hover: none 보고 할 수 있습니다. 반대로 표면 태블릿은 주로 트랙 패드 ( pointer: fine )를 사용할 수 있지만 사용자는 터치 스크린을 선호 할 수 있습니다.

이 문제는 any-pointer 및 any-hover 에 의해 해결됩니다.

모든 입력을 평가합니다

any-pointer 및 any-hover 모든 포인터 입력의 결합 된 기능을 반영합니다. 입력이 다른 특성을 갖는 경우 여러 값이 일치 할 수 있습니다. 현재 구현은 일반적으로 다음과 같이 작동합니다.

원래 사용 사례를 개선하기 위해 모든 포인터 입력에 대한 기본 결정 : "입력 이 거칠어지면 제어를 확대하고" 적어도 하나의 입력이 호버를 지원하는 경우 호버 메뉴를 활성화하십시오. "

 <code>@media (any-pointer: coarse) { /* At least one coarse pointer: larger controls */ } @media (any-hover: hover) { /* At least one hover-capable input: enable hover menus */ }</code>

any-pointer: none 포인터 입력이 존재 하지 않는 경우에만 해당되지 않습니다. any-hover: none 입력 중 어느 것도 호버를 지원하지 않아서 크게 중복되는 경우에만 해당되지 않습니다.

뉘앙스를 위해 쿼리를 결합합니다

정제 된 평가를 위해 쿼리를 결합하십시오.

 <code>@media (pointer: coarse) and (any-pointer: fine) { /* Primary input is touchscreen, but a fine input exists. Prioritize touch, but mouse/stylus users can still interact. */ } @media (pointer: fine) and (any-pointer: coarse) { /* Primary input is mouse/stylus, but a touchscreen exists. Larger controls might be safest. */ } @media (hover: none) and (any-hover: hover) { /* Primary input lacks hover, but another input supports it. Treat hover as optional. */ }</code>

브라우저는 환경 변화 (예 : Bluetooth 마우스 추가)에 대한 응답으로 쿼리를 동적으로 재평가합니다.

스크립팅이 필요할 수 있습니다

상호 작용 미디어 기능은 현재 사용되는 입력을 나타내지 않습니다. 어떤 입력과 같은 도구? JavaScript 이벤트를 추적하지만 상호 작용이 시작된 후에 만 ​​정보를 제공하며 가짜 이벤트 (보조 기술, iOS 전체 키보드 지원)로 인해 부정확 할 수 있습니다.

깨진 경험을 피합니다

이벤트 기반 터치 감지 ( pointer: coarse -> 터치 이벤트 듣기)에 결함이 있습니다. 주로 마우스 중심 장치의 터치 장치에서 터치 스크린 입력 및 터치 스크린 입력을 사용하지 않습니다. 대신, 항상 마우스/키보드 이벤트를 듣고 any-pointer: coarse 경우에만 터치 이벤트 리스너를 추가하십시오.

 / * 항상 마우스/키보드 이벤트를 듣습니다 */
target.addeventListener ( "클릭", ...);

if (wind
 / * 거친 포인터가 존재하는 경우 터치 이벤트도 듣습니다 */
 target.addeventListener ( "터치 스타트", ...);
}

또는 통합 입력 처리에 포인터 이벤트를 사용하십시오.

명백한 사용자 선택

입력 감지 함정을 피하기 위해 사용자가 선택 가능한 모드 (터치/마우스)를 제공하십시오. 미디어 쿼리를 사용하여 기본 설정에 알리고 터치 입력을 감지하여 모드 스위치를 자극하십시오.

책임있는 쿼리

상호 작용 미디어 기능의 한계를 이해하십시오. 단일 입력 유형을 가정하지 말고 pointer 및 hover 에만 의존하거나 키보드 접근성을 무시하십시오. 대신 터치 친화적 인 우선 순위를 정하고 사용자 선택을 제공하며 항상 키보드 접근성을 보장하십시오.

위 내용은 상호 작용 미디어 기능 및 잠재력 (잘못된 가정)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!