2013-02-04 3 views
1

터치 스크린을 사용하지 않도록 설정해야하는 웹 사이트에 일부 jquery 마우스 오버 효과가 있지만 JQuery를 비활성화 할 화면 너비는 어떻게 알 수 있습니까? 지금은 800px 미만입니다. 이것은 ipad 초상화에서 작동하지만 가로로 돌릴 때 JQuery가 다시 활성화됩니다. 나는 Ipad 가로 폭이 1024px 인 것을 읽었다. 그러나 이것도 작은 터치 스크린의 크기가 될 수있다. 화면 너비 대신 특정 장치에 효과를 지정할 수있는 방법이 있습니까?반응 형 디자인 - 터치 스크린에 jquery 효과 사용 안 함

답변

2

이 작업을 수행하려면 터치 장치의 마우스 오버 이벤트를 비활성화하는 대신 터치가 아닌 장치의 이벤트를 추가하는 대신 다른 방법으로 작업해야합니다.

프로젝트에 이미 Modernizr을 추가하십시오. 일단 당신이 HTML 요소에 클래스로 추가하여 "터치"에 대한 테스트를 포함 할 수 있습니다 추가

<html class="touch"> 

장치는 장치가 다음 터치가없는 그러나 경우에 터치 기능이 후 모든 것이 그대로 남아있는 경우 moderizr 내가 코드 쪽이의 예를 넣었습니다에서 touch에에 no-touch

<html class="no-touch"> 

당신은 다음 .no-touch

의 클래스를 갖는 HTML 요소 떨어져 당신의 마우스 이벤트를 결합 할 수있는 은밀한 것 en - http://rwd.is/VyRl37

모든 장치에 대해 jQuery 라이브러리를로드 중이며 터치 장치를 기반으로하는 함수 위에 마우스를로드할지 여부를 결정했다고 가정합니다. 조건부로 jQuery 자체를로드하려는 경우 enquire.js을 참조하여 지정된 너비로 jQuery를로드해야합니다.

더 작은 장치에서 다른 기능을 위해 jQuery를 유지하려고하지만 성능을 향상 시키려면 가벼운 대체물로 Zepto.js을 사용하여 볼 수 있습니다.

마지막으로 Response.js도 특정 중단 점에서 함수를 호출 할 수 있지만 터치 사용 여부를 알지 못하는 문제가 발생합니다.