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

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

---

Javascript / jQuery에서 클라이언트 장치에 마우스가 있는지 어떻게 알 수 있습니까?

사용자가 항목 위로 마우스를 가져 가면 정보 패널이 약간 위로 미끄러지는 사이트가 있습니다. 호버를 감지하기 위해 jQuery.hoverIntent를 사용하고 있지만 iPhone / iPad / Android와 같은 터치 스크린 장치에서는 분명히 작동하지 않습니다. 따라서 해당 장치에서 정보 패널을 표시하기 위해을 탭하여 되돌리고 싶습니다.

---

수행하기위한 하나 hover와 click둘. 다른 방법은 CSS 미디어 쿼리를 사용하고 터치 / 탭 기능이있을 가능성이 큰 작은 화면 / 모바일 장치에 대해서만 일부 스타일을 사용하는 것입니다. 따라서 CSS를 통해 특정 스타일이있는 경우 jQuery에서 해당 요소를 모바일 장치 스타일 속성으로 확인하면 모바일 특정 코드를 작성하기 위해 해당 요소에 연결할 수 있습니다.

여기를 참조하십시오 : http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

---

var isTouchDevice = 'ontouchstart' in document.documentElement;

참고 : 장치가 터치 이벤트를 지원한다고해서 반드시 터치 스크린 장치라는 의미는 아닙니다. 내 Asus Zenbook과 같은 많은 장치는 실제 터치 입력 메커니즘이없는 경우에도 클릭 및 터치 이벤트를 모두 지원합니다. 터치 지원을 설계 할 때는 항상 클릭 이벤트 지원을 포함하고 어떤 장치가 하나만 있다고 가정하지 마십시오.

---

window.Touch에 대한 테스트를 찾았지만 Android에서는 작동하지 않지만 다음과 같이 작동합니다.

function is_touch_device() {
  return !!('ontouchstart' in window);
}

문서를 참조하십시오 자바 스크립트를 사용하여 '터치 스크린'장치를 감지 할 수있는 가장 좋은 방법은 무엇입니까?

---

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

msMaxTouchPoints와 함께 maxTouchPoints를 사용하는 이유 :

Microsoft는 Internet Explorer 11부터이 속성의 Microsoft 공급 업체 접두사 버전 (msMaxTouchPoints)을 제거 할 수 있으며 대신 maxTouchPoints를 사용하는 것이 좋습니다.

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

---

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

모든 곳에서 작동합니다!

---

나는 사용한다:

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery Mobile 1.0.1에서

---

Chrome은 다음에 대해 오 탐지를 반환하는 것 같습니다.

var isTouch = 'ontouchstart' in document.documentElement;

"터치 이벤트 에뮬레이션"(F12-> 오른쪽 하단의 설정-> "재정의"탭-> 마지막 확인란)과 관련이 있다고 생각합니다. 기본적으로 사용 중지되어 있음을 알고 있지만 이것이 결과 변경 사항 (Chrome에서 작동하는 데 사용 된 'in'방법)과 연결되는 것입니다. 그러나 이것은 테스트 한 한 작동하는 것 같습니다.

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

typeof 가 "object"인 상태에서 해당 코드를 실행 한 모든 브라우저 는 그것이 정의되지 않은 것임을 알고 더 확실합니다 :-)

IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, iPad 용 Chrome 21.0.1180.80 및 iPad Safari에서 테스트되었습니다. 누군가가 더 많은 테스트를하고 결과를 공유하면 멋질 것입니다.

---

내 사이트 중 하나에 대해 이것을 작성했으며 아마도 가장 완벽한 솔루션 일 것입니다. 특히 Modernizr조차도 터치 감지에 대해 오 탐지를 얻을 수 있기 때문에.

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";
}

---

첫 번째 게시물 / 코멘트 : 클릭하기 전에 '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

좋은 하루 보내세요!

---

I have tested following code mentioned above in the discussion

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

works on android Mozilla, chrome, Opera, android default browser and safari on iphone... all positive ...

seems solid for me :)

---

A helpful blog post on the subject, linked to from within the Modernizr source for detecting touch events. Conclusion: it's not possible to reliably detect touchscreen devices from Javascript.

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

---

This works for me:

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

---

If you use Modernizr, it is very easy to use Modernizr.touch as mentioned earlier.

However, I prefer using a combination of Modernizr.touch and user agent testing, just to be safe.

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
    }

If you don't use Modernizr, you can simply replace the Modernizr.touch function above with ('ontouchstart' in document.documentElement)

Also note that testing the user agent iemobile will give you broader range of detected Microsoft mobile devices than Windows Phone.

Also see this SO question

---

In jQuery Mobile you can simply do:

$.support.touch

Don't know why this is so undocumented.. but it is crossbrowser safe (latest 2 versions of current browsers).

---

For iPad development I am using:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

I can then selectively bind to the touch based events (eg ontouchstart) or mouse based events (eg onmousedown). I haven't yet tested on android.

참고URL : https://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript