JavaScript 요령: 터치 스크린 장치를 효율적으로 감지하는 방법은 무엇입니까?

Question

저는 데스크탑과 모바일 장치용 jQuery 플러그인을 작성했습니다. JavaScript를 사용하여 장치에 터치스크린 기능이 있는지 감지하는 방법이 있는지 궁금합니다. 터치 스크린 이벤트를 감지하기 위해 jquery-mobile.js를 사용하고 있으며 iOS, Android 등에서 작동하지만 사용자 장치에 터치 스크린이 있는지 여부에 따라 조건문도 작성하고 싶습니다.

이게 가능할까요?

Answer 1

업데이트 2021

이전 답변을 보려면: 기록을 확인하세요. 게시물에 기록을 보관하면 관리하기 어려워지기 때문에 처음부터 시작하기로 결정했습니다.

원래 답변에서는 Modernizr이 사용하는 것과 동일한 기능을 사용할 수 있다고 했지만 이 PR에서 "touchevents" 테스트를 제거했기 때문에 더 이상 유효하지 않습니다. https://github.com/Modernizr/Modernizr/pull/ 2432 , 이것은 혼란스러운 주제이기 때문입니다.

그래도 이는 브라우저가 "터치 가능"인지 감지하는 매우 좋은 방법입니다.

으아악

그러나 고급 사용 사례의 경우 나보다 훨씬 똑똑한 사람들이 이미 이 주제에 대해 글을 썼으므로 다음 내용을 읽어 보시기 바랍니다.

• Stu Cox: 터치 스크린을 감지할 수 없습니다
• 터치 감지: '어떻게'가 아닌 '이유'에 집중하세요
• Patrick H. Lauke의 터치 소개

Answer 2

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

Modernizr은 모든 웹사이트에서 다양한 기능을 감지할 수 있는 간단한 방법입니다.

각 속성에 대해 html 요소에 클래스를 추가할 뿐입니다.

그러면 CSS 및 JS에서 이러한 기능을 쉽게 타겟팅할 수 있습니다. 예:

으아악

그리고 JavaScript(jQuery 예):

으아악