[css] 장치가 터치 스크린인지 감지하기위한 미디어 쿼리

미디어 쿼리를 사용하여 터치 스크린 장치가 아닐 때 작업을 수행하는 가장 안전한 방법은 무엇입니까? 방법이 없다면 !window.Touch또는 Modernizr 와 같은 JavaScript 솔루션을 사용하는 것이 좋습니까?

답변

modernizr 를 사용하고 미디어 쿼리 기능을 사용하는 것이 좋습니다 .

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

그러나 CSS를 사용하면 Firefox와 같은 의사 클래스가 있습니다. 당신은 사용할 수 있습니다 : -moz-시스템 메트릭 (터치 지원) . 그러나 이러한 기능은 모든 브라우저에서 사용할 수 없습니다.

를 들어 애플 장치, 당신은 간단하게 사용을 할 수 있습니다

if(window.TouchEvent) {
   //.....
}

특히 Ipad의 경우 :

if(window.Touch) {
    //....
}

그러나 이들은 Android에서 작동하지 않습니다 .

Modernizr 는 기능 감지 기능을 제공하며 기능 감지는 브라우저를 기반으로 코딩하는 것보다 코딩하는 좋은 방법입니다.

터치 요소 스타일링

Modernizer는 이러한 정확한 목적을 위해 HTML 태그에 클래스를 추가합니다. 이 경우, touch그리고 no-touch당신은 .touch하여 선택기를 앞에 붙여 터치 관련 측면의 스타일을 할 수 있습니다. 예 : .touch .your-container. ^{크레딧 : Ben Swinburne}

답변

실제로 CSS4 미디어 쿼리 초안 에 대한 속성이 있습니다 .

‘포인터’미디어 기능은 마우스와 같은 포인팅 장치의 존재 여부와 정확성을 쿼리하는 데 사용됩니다. 장치에 여러 입력 메커니즘이있는 경우 UA가 기본 입력 메커니즘의 최소 기능 포인팅 장치의 특성을보고하는 것이 좋습니다. 이 미디어 쿼리는 다음 값을 사용합니다.

‘없음’
-장치의 입력 메커니즘에 포인팅 장치가 포함되어 있지 않습니다.

‘coarse’-
장치의 입력 메커니즘에는 정확도가 제한된 포인팅 장치가 포함됩니다.

‘fine’-
장치의 입력 메커니즘에는 정확한 포인팅 장치가 포함됩니다.

이것은 다음과 같이 사용됩니다.

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

이와 관련된 Chromium 프로젝트 에서도 티켓 을 찾았 습니다 .

브라우저 호환성은 Quirksmode 에서 테스트 할 수 있습니다 . 내 결과입니다 (2013 년 1 월 22 일) :

Chrome / Win : 작동
Chrome / iOS : 작동하지 않음
Safari / iOS6 : 작동하지 않음

답변

CSS 솔루션은 2013 년 중반 현재 널리 사용되지 않는 것으로 보입니다. 대신 …

Nicholas Zakas는 Modernizr no-touch가 브라우저가 터치를 지원하지 않을 때 CSS 클래스를 적용 한다고 설명 합니다 .

또는 간단한 코드로 JavaScript에서 감지하여 자신 만의 Modernizr 솔루션을 구현할 수 있습니다.

<script>
    document.documentElement.className +=
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

그런 다음 CSS를 다음과 같이 작성할 수 있습니다.

.no-touch .myClass {
    ...
}
.touch .myClass {
    ...
}

답변

미디어 유형을 사용하면 표준의 일부로 터치 기능을 감지 할 수 없습니다.

http://www.w3.org/TR/css3-mediaqueries/

따라서 CSS 또는 미디어 쿼리를 통해 일관되게 수행 할 수있는 방법이 없으므로 JavaScript에 의존해야합니다.

Modernizr를 사용할 필요가 없으며 일반 JavaScript를 사용할 수 있습니다.

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

답변

2017 년에는 두 번째 답변의 CSS 미디어 쿼리가 Firefox에서 여전히 작동하지 않습니다. 이에 대한 해결책을 찾았습니다. -moz-touch-enabled

따라서 다음은 브라우저 간 미디어 쿼리입니다.

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

답변

실제로 미디어 쿼리가 있습니다.

@media (hover: none) { … }

Firefox 외에도 상당히 잘 지원됩니다 . Safari와 Chrome은 모바일 장치에서 가장 일반적인 브라우저이므로 더 많이 채택 될 때까지 충분할 수 있습니다.

답변

작동합니다. 알려주지 않으면

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

편집 : 주문형 호버는 더 이상 지원되지 않습니다.