자바 스크립트와 터치 스크린 장치를 감지

해결법

1.호버을하고 모두를 클릭 +1. 또 다른 방법은 CSS 미디어 쿼리를 사용하여 만들 가능성이 가장 높은 터치 / 탭 기능을 가지고 있습니다 작은 화면 / 모바일 장치에 대한 몇 가지 스타일을 사용 할 수있다. 그래서 당신은 CSS를 통해 일부 특정 스타일을 가지고 있고, jQuery를에서 당신은 당신이 당신에게 모바일 특정 코드를 작성하는 그들에 훅 수있는 모바일 장치 스타일의 숙소에 대한 이러한 요소를 확인합니다.

호버을하고 모두를 클릭 +1. 또 다른 방법은 CSS 미디어 쿼리를 사용하여 만들 가능성이 가장 높은 터치 / 탭 기능을 가지고 있습니다 작은 화면 / 모바일 장치에 대한 몇 가지 스타일을 사용 할 수있다. 그래서 당신은 CSS를 통해 일부 특정 스타일을 가지고 있고, jQuery를에서 당신은 당신이 당신에게 모바일 특정 코드를 작성하는 그들에 훅 수있는 모바일 장치 스타일의 숙소에 대한 이러한 요소를 확인합니다.

여기를 참조하십시오 : http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
2.
```
var isTouchDevice = 'ontouchstart' in document.documentElement;
```
참고 : 장치가 지원하는 이벤트를 터치해서 반드시 독점적으로 터치 스크린 장치는 것을 의미하지 않는다. (예 : 내 아수스 Zenbook 등) 많은 장치들이 실제 터치 입력 메커니즘을 가지고 doen't 경우에도, 모두 클릭과 터치 이벤트를 지원합니다. 터치 지원을 설계 할 때, 항상 이벤트 지원을 클릭하고 모든 장치가 독점적으로 하나 또는 다른 가정 적이 있습니다.
3.window.Touch에 대한 찾을 테스트는 안드로이드에 일을하지 않았다 그러나 이것은 않습니다 :

window.Touch에 대한 찾을 테스트는 안드로이드에 일을하지 않았다 그러나 이것은 않습니다 :
```
function is_touch_device() {
  return !!('ontouchstart' in window);
}
```
문서를 참조하십시오 자바 스크립트를 사용하여 '터치 스크린'장치를 감지 할 수있는 가장 좋은 방법은 무엇입니까?
4.
```
return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));
```
msMaxTouchPoints alongwith maxTouchPoints를 사용하는 이유 :

출처 : http://ctrlq.org/code/19616-detect-touch-screen-javascript

5.

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

모든 곳을 작품!

6.나는 사용한다:

나는 사용한다:
```
if(jQuery.support.touch){
    alert('Touch enabled');
}
```
jQuery를 모바일 1.0.1에서
7.구글 크롬이 하나 오탐 (false positive)를 반환 할 것 같다 :

구글 크롬이 하나 오탐 (false positive)를 반환 할 것 같다 :
```
var isTouch = 'ontouchstart' in document.documentElement;
```
나는 "에뮬레이션 터치 이벤트"(-> 오른쪽 하단에서 설정 -> "재정의"탭 -> 마지막 체크 박스 F12) 할 수있는 능력과 함께 할 수있는 뭔가가 가정합니다. 나는 기본적으로 꺼져 알고 있지만 내가 (크롬에서 작업에 사용되는 방법 "에서")과 결과에 변화를 연결하는 것입니다. 그러나, 이것은 지금까지 내가 테스트 한대로 작동하는 것 같군 :
```
var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
```
모든 브라우저가 나는 상태에서 코드가 대해서 typeof는 "객체"라고 실행했지만 나는 그것이 무엇이든하지만 정의되지 않은 것을 알고 더 확실한 느낌 :-)

아이 패드 21.0.1180.80과 아이 패드 사파리 IE7, IE8, IE9, IE10, 크롬 23.0.1271.64, 크롬에서 테스트. 사람이 좀 더 테스트를하게하고 그 결과를 공유하는 경우는 멋진 것이다.
8.내 사이트 중 하나이 쓴 아마도 가장 절대 안전한 솔루션입니다. 특히도 있기 때문에 모더 나이저 터치 감지에 대한 잘못된 반응을 얻을 수 있습니다.

내 사이트 중 하나이 쓴 아마도 가장 절대 안전한 솔루션입니다. 특히도 있기 때문에 모더 나이저 터치 감지에 대한 잘못된 반응을 얻을 수 있습니다.

당신이 jQuery를 사용하는 경우
```
$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});
```
아니면 그냥 순수 JS ...
```
window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}
```
9.내 첫 번째 게시물 / 설명 : 우리 'touchstart는'클릭하기 전에 트리거되는 것을 모두 알고. 우리는 또한 사용자가 페이지에게 그가를 열 때 또는 그 그녀 것 알고있다 : 1) 마우스를 이동 2) 클릭 3) 스크롤 (화면을 터치하거나 ... :))

내 첫 번째 게시물 / 설명 : 우리 'touchstart는'클릭하기 전에 트리거되는 것을 모두 알고. 우리는 또한 사용자가 페이지에게 그가를 열 때 또는 그 그녀 것 알고있다 : 1) 마우스를 이동 2) 클릭 3) 스크롤 (화면을 터치하거나 ... :))

하자의 시도 뭔가 :

// -> 시작 : jQuery를
```
var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});
```
// <- 끝 : jQuery를

좋은 하루 되세요!
10.나는 코드가 토론에 위에서 언급 한 다음 테스트 한

나는 코드가 토론에 위에서 언급 한 다음 테스트 한
```
 function is_touch_device() {
    return !!('ontouchstart' in window);
 }
```
아이폰에 안드로이드 모질라, 크롬, 오페라, 안드로이드 기본 브라우저와 사파리에 작품 ... 모든 긍정적 인 ...

나를 위해 고체 보인다 :)
11.주제에 도움이 블로그 게시물은 터치 이벤트를 검출하기위한 모더 나이저 소스에서 링크로. 결론 :이 안정적으로 자바 스크립트에서 터치 스크린 장치를 탐지 할 수 없습니다.

주제에 도움이 블로그 게시물은 터치 이벤트를 검출하기위한 모더 나이저 소스에서 링크로. 결론 :이 안정적으로 자바 스크립트에서 터치 스크린 장치를 탐지 할 수 없습니다.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

12.이것은 나를 위해 작동합니다 :

이것은 나를 위해 작동합니다 :

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

13.당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 Modernizr.touch를 사용하기 쉽습니다.

당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 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
    }
```
당신이 모더 나이저를 사용하지 않는 경우, 당신은 단순히 (document.documentElement에서 'ontouchstart')와 위의 Modernizr.touch 기능을 대체 할 수

또한 사용자 에이전트를 테스트하는 iemobile 당신에게 윈도우 폰에 비해 감지 마이크로 소프트 모바일 장치의 넓은 범위를 제공 않습니다.

또한이 SO 질문을 참조
14.jQuery를 모바일에서 당신은 간단하게 할 수 있습니다 :

jQuery를 모바일에서 당신은 간단하게 할 수 있습니다 :
```
$.support.touch
```
이 때문에 문서화되지 않은 이유를 알고 ..하지만 crossbrowser 금고 (현재 브라우저의 최신 2 개 버전)입니다하지 마십시오.
15.이미 언급 한 바와 같이, 디바이스는 마우스, 터치 입력을 모두 지원할 수있다. 매우 자주, 문제는 "현재 사용되는 것" "지원하는 방식"하지만 아니다.

이미 언급 한 바와 같이, 디바이스는 마우스, 터치 입력을 모두 지원할 수있다. 매우 자주, 문제는 "현재 사용되는 것" "지원하는 방식"하지만 아니다.

이 경우를 들어, 당신은 단순히 (호버 수신기 포함) 마우스 이벤트와 터치 이벤트 모두를 등록 할 수 있습니다.
```
element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...
```
자바 스크립트가 자동으로 사용자의 입력에 따라 올바른 리스너를 호출해야합니다. 그래서, 터치 이벤트의 경우, onTouchStartCallback은 당신의 호버 코드를 모방, 해고 될 것이다.

터치 리스너, 터치 마우스의 두 종류의 발광 할 수 있습니다. 그러나, 터치 리스너가 먼저 가고, event.preventDefault ()를 호출 해, 발사에서 다음 마우스 리스너를 방지 할 수 있습니다 ().
```
function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}
```
또한 여기에 읽기.
16.아이 패드 개발을 위해 내가 사용하고 있습니다 :

아이 패드 개발을 위해 내가 사용하고 있습니다 :
```
  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }
```
나는 선택적으로 터치 기반 이벤트 (예 : ontouchstart)를 결합하거나 할 수 마우스 기반 이벤트 (예하면 onMouseDown). 아직 안드로이드에서 테스트하지 않았습니다.

from https://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 페이지 / iframe이 하단에 jQuery를 스크롤 (0)	2020.10.22
[JQUERY] 어떻게 jQuery를 사용하여 페이지의 특정 위치로 스크롤 할 수 있습니다? (0)	2020.10.22
[JQUERY] $ (문서) .ready (함수 () {}); 페이지 하단의 스크립트 대 (0)	2020.10.22
[JQUERY] 직렬화 및 추가 데이터와 jQuery를 포스트 () (0)	2020.10.22
[JQUERY] 감지 아이폰 OS / 안드로이드 운영 체제 (0)	2020.10.22

복붙노트

[JQUERY] 자바 스크립트와 터치 스크린 장치를 감지

자바 스크립트와 터치 스크린 장치를 감지

해결법

2.

3.window.Touch에 대한 찾을 테스트는 안드로이드에 일을하지 않았다 그러나 이것은 않습니다 :

4.

5.

6.나는 사용한다:

7.구글 크롬이 하나 오탐 (false positive)를 반환 할 것 같다 :

8.내 사이트 중 하나이 쓴 아마도 가장 절대 안전한 솔루션입니다. 특히도 있기 때문에 모더 나이저 터치 감지에 대한 잘못된 반응을 얻을 수 있습니다.

9.내 첫 번째 게시물 / 설명 : 우리 'touchstart는'클릭하기 전에 트리거되는 것을 모두 알고. 우리는 또한 사용자가 페이지에게 그가를 열 때 또는 그 그녀 것 알고있다 : 1) 마우스를 이동 2) 클릭 3) 스크롤 (화면을 터치하거나 ... :))

10.나는 코드가 토론에 위에서 언급 한 다음 테스트 한

11.주제에 도움이 블로그 게시물은 터치 이벤트를 검출하기위한 모더 나이저 소스에서 링크로. 결론 :이 안정적으로 자바 스크립트에서 터치 스크린 장치를 탐지 할 수 없습니다.

12.이것은 나를 위해 작동합니다 :

13.당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 Modernizr.touch를 사용하기 쉽습니다.

14.jQuery를 모바일에서 당신은 간단하게 할 수 있습니다 :

15.이미 언급 한 바와 같이, 디바이스는 마우스, 터치 입력을 모두 지원할 수있다. 매우 자주, 문제는 "현재 사용되는 것" "지원하는 방식"하지만 아니다.

16.아이 패드 개발을 위해 내가 사용하고 있습니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바