[javascript] JavaScript를 사용하여 ‘터치 스크린’장치를 감지하는 가장 좋은 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

데스크톱 및 모바일 장치 모두에서 사용할 수있는 jQuery 플러그인을 작성했습니다. 장치에 터치 스크린 기능이 있는지 감지하는 JavaScript가 가능한지 궁금했습니다. jquery-mobile.js를 사용하여 터치 스크린 이벤트를 감지하고 iOS, Android 등에서 작동하지만 사용자의 장치에 터치 스크린이 있는지 여부에 따라 조건문을 작성하고 싶습니다.

가능합니까?

답변

업데이트 : 전체 기능 탐지 라이브러리를 프로젝트로 가져 오기 전에 아래 blmstr의 답변을 읽으 십시오. 실제 터치 지원 감지는 더 복잡하며 Modernizr은 기본 사용 사례 만 다룹니다.

Modernizr 은 모든 사이트에서 모든 종류의 기능 탐지를 수행 할 수있는 훌륭하고 가벼운 방법입니다.

단순히 각 기능의 html 요소에 클래스를 추가합니다.

그런 다음 CSS 및 JS에서 이러한 기능을 쉽게 대상으로 지정할 수 있습니다. 예를 들면 다음과 같습니다.

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

그리고 자바 스크립트 (jQuery 예제) :

$('html.touch #popup').hide();

답변

이 기능을 사용해 보셨습니까? (이것은 Modernizr이 사용했던 것과 동일합니다.)

function is_touch_device() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

console.log(is_touch_device());

스 니펫 확장

업데이트 1

document.createEvent("TouchEvent")true최신 크롬 으로 돌아 가기 시작했습니다 (17 절). Modernizr는 이것을 얼마 전에 업데이트했습니다. 여기서 Modernizr 테스트를 확인하십시오 .

다음과 같이 기능을 업데이트하여 작동 시키십시오.

function is_touch_device1() {
  return 'ontouchstart' in window;
}

console.log(is_touch_device1());

스 니펫 확장

업데이트 2

위의 내용이 IE10에서 작동하지 않는 것으로 나타났습니다 (MS Surface에서 false 반환). 수정 사항은 다음과 같습니다.

function is_touch_device2() {
  return 'ontouchstart' in window        // works on most browsers 
  || 'onmsgesturechange' in window;  // works on IE10 with some false positives
};

console.log(is_touch_device2());

스 니펫 확장

업데이트 3

'onmsgesturechange' in window일부 IE 데스크톱 버전에서는 true를 반환하므로 신뢰할 수 없습니다. 이것은 약간 더 안정적으로 작동합니다.

function is_touch_device3() {
  return !!('ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints);       // works on IE10/11 and Surface
};

console.log(is_touch_device3());

스 니펫 확장

2018 업데이트

시간이 지남에 따라 이것을 테스트하는 새롭고 더 나은 방법이 있습니다. 나는 기본적으로 Modernizr의 확인 방법을 추출하고 단순화했습니다.

function is_touch_device4() {

    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

    var mq = function (query) {
        return window.matchMedia(query).matches;
    }

    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        return true;
    }

    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
    // https://git.io/vznFH
    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
    return mq(query);
}

console.log(is_touch_device4());

스 니펫 확장

여기서 그들은 비표준 touch-enabled미디어 쿼리 기능을 사용하고 있습니다. 이것은 다소 이상하고 나쁜 습관이라고 생각합니다. 그러나 이봐, 현실 세계에서 나는 그것이 작동한다고 생각한다. (그들은 모두 지원하는) 앞으로 그 미디어 쿼리 기능은 당신에게 동일한 결과를 줄 수 : pointer와 hover.

Modernizr이 어떻게하고 있는지 소스를 확인하십시오 .

터치 감지 문제를 설명하는 유용한 기사를 보려면 Stu Cox : 터치 스크린을 감지 할 수 없습니다를 참조하십시오
.

답변

Modernizr은 Windows Phone 8 / WinRT에서 IE10을 감지하지 못하므로 간단한 크로스 브라우저 솔루션은 다음과 같습니다.

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

기기가 터치를 갑자기 지원하지 않거나 지원하지 않기 때문에 한 번만 확인하면되므로 여러 번 더 효율적으로 사용할 수 있도록 변수에 저장하면됩니다.

답변

위의 모든 주석을 사용하여 내 요구에 맞는 다음 코드를 작성했습니다.

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

나는 이것을 iPad, Android (브라우저 및 Chrome), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10 (터치 스크린이있는 Windows 8), Opera, Chrome 및 Firefox에서 테스트했습니다.

현재 Windows Phone 7에서 실패하고 해당 브라우저에 대한 솔루션을 아직 찾을 수 없습니다.

누군가가 이것을 유용하게 사용하기를 바랍니다.

답변

상호 작용 미디어 기능 이 도입 되었으므로 간단히 수행 할 수 있습니다.

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer

업데이트 (의견으로 인해) : 위의 해결책은 “거친 포인터”(일반적으로 터치 스크린)가 기본 입력 장치인지 감지하는 것입니다. 마우스와 같은 장치에 터치 스크린이 있는지 여부를 결정하려는 경우 사용할 수 있습니다any-pointer: coarse 대신 .

자세한 내용은 여기를 참조하십시오. 브라우저에 마우스가없고 터치 전용인지 감지

답변

난이게 좋아:

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

alert(isTouchDevice());

답변

당신이 사용하는 경우 모더 나이저를 , 그것은 매우 쉽게 사용할 수 있나요 Modernizr.touch앞서 언급 한 바와 같이.

그러나 Modernizr.touch안전한 사용을 위해 조합 및 사용자 에이전트 테스트를 사용하는 것이 좋습니다.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizr을 사용하지 않으면 Modernizr.touch위 의 함수를('ontouchstart' in document.documentElement)

또한 사용자 에이전트를 테스트 iemobile하면보다 다양한 탐지 된 Microsoft 모바일 장치를 제공 할 수 있습니다 Windows Phone.

또한이 SO 질문을 참조하십시오