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

미디어 쿼리를 사용하여 터치 스크린 장치가 아닐 때 작업을 수행하는 가장 안전한 방법은 무엇입니까? 방법이 없다면 !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 년 중반 현재 널리 사용되지 않는 것으로 보입니다. 대신 ...

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

2. 또는 간단한 코드로 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 */
}

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

이 솔루션은 CSS4가 모든 브라우저에서 전역 적으로 지원 될 때까지 작동합니다. 그날이 오면 CSS4를 사용하십시오. 그러나 그때까지는 현재 브라우저에서 작동합니다.

browser-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

길 위에:

옛날 방식 :

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

새로운 방법 :

isMobile.any() ? document.body.classList.add('is-touch') : null;

위 코드는 장치에 터치 스크린이있는 경우 "is-touch"클래스를 body 태그에 추가합니다. 이제 웹 응용 프로그램의 모든 위치에서 : hover에 대한 CSS를 사용할 수 있습니다.body:not(.is-touch) the_rest_of_my_css:hover

예를 들면 :

button:hover

된다 :

body:not(.is-touch) button:hover

이 솔루션은 modernizer lib가 매우 큰 라이브러리이기 때문에 modernizer를 사용하지 않습니다. 터치 스크린을 감지하는 것뿐이라면 최종 컴파일 된 소스의 크기가 필요한 경우 이것이 가장 좋습니다.

JS 또는 jQuery를 사용하여 본문에 클래스 터치 스크린 추가

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

이것을 사용하여이 문제를 해결할 수있었습니다

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}