브라우저 감지 - 모바일 대 PC

Question

브라우저 검색 및 기능 감지에 관한 몇 가지 스레드를 읽었으므로, 내가해야 할 일이 해당 토론의 범주에 속하는지 정확히 알지 못합니다.

게임 사이트가 있습니다. 사람들은 PC 나 모바일 장치로 게임을 즐길 수 있습니다. 또한 게임을 어떻게 작동 시킬지 구성 할 수 있습니다. 예를 들어, 카드를 한 번 클릭하거나 두 번 클릭하여 카드를 재생할 수 있습니다. 그러나 휴대 기기에서는 두 번 클릭하는 옵션 옵션이 없으므로 일부 옵션은 선택 옵션을 선택하고 자바 스크립트가 작동하지 않기 때문에 멈추는 경우가 있습니다.

나는 사람들이 모바일 장치에 대한 기본 설정 한 세트와 PC에 대한 기본 설정을 지정하게하고 해당 장치에서 사용할 수있는 옵션 만 제공 할 것이라고 생각했습니다. 그러나 필자는 PC와 모바일 장치를 탐지하는 것이 나쁜 방법이라는 것을 읽었습니다.

그렇다면 기능을 감지하면 정확히 무엇을 감지합니까? 장치가 두 번 클릭을 특별히 지원하는지 감지 할 수있는 방법은 없습니다.

Answer 1

많은 기기가 너무 많아 지속적으로 변경되기 때문에 웹 사이트에 효율적으로 액세스하는 PC 나 휴대 기기가 어디인지를 감지 할 수 없습니다. 이를 수행하는 유일한 방법은 꽤 지루한 브라우저 에이전트 문자열을 검사하는 것입니다. 그것의 수천이 있습니다. 또한 스푸핑 될 수 있으므로 좋은 정보원이 아닙니다. 당신이 할 수있는 최선 (나를 포함한 많은 전문가들이하는 것)은 화면 해상도, 지원되는 HTML 태그, 지원되는 CSS 속성 등의 기능 감지 기술을 사용하고 있습니다.

좋은 도구는 기능이있는 Modenizr js 라이브러리입니다. 기반으로 장치가 터치 이벤트를 지원하는지 여부를 확인할 수 있습니다. 그렇다면 두 번 클릭하는 것이 옵션이 아님을 알고 있습니다.

여기 http://modernizr.com/docs/#features-misc

Answer 2

은 당신이 정말로 원하는 것은 터치 지원을위한 시험, Detecting touch: it’s the ‘why’, not the ‘how’을 시도 할 것 같다 일부 문서에 대한 링크입니다.

if (document && document.element && 'ontouchstart' in document.documentElement) { 
    ... 
} 

그러나 일부 브라우저에서 실패 할 가능성이 높습니다 :

일반적인 제안입니다. 아마 더 정확하지만 더 긴 방법은 직접 이벤트 지원을 테스트하는 것입니다 : 다른 곳에서 작동하는 것 같다하지만

그것은 2008 년에 기록 된

/* Feature tests for TouchEvent and GestureEvent modules 
    * implemented in Mobile Safari on iPhone 
    * 
    * The TouchEvent module is a draft (18/08/2008) that supports: 
    * 
    * touchstart 
    * touchmove 
    * touchend 
    * touchcancel 
    * 
    * The GestureEvent module is a draft (18/08/2008) 
    * that supports: 
    * 
    * gesturestart 
    * gesturechange 
    * gestureend 
    * 
    * The functions require support for try..catch, introduced 
    * in ECMA-262 ed3, JavaScript 1.4 and JScript 5.1.5010. 
    * Equates to Navigator 4.0 or later and IE 5.1 or later 
    * (http://pointedears.de/scripts/es-matrix/) 
    * 
    * If W3C DOM 2 Event document.createEvent is supported, 
    * return either true or false, 
    * otherwise return undefined. 
    */ 
    function touchSupported() { 
    if (document && document.createEvent) { 
     try { 
     document.createEvent('TouchEvent'); 
     return true; 
     } catch (e) { 
     return false; 
     } 
    } 
    } 

    function gestureSupported() { 
    if (document && document.createEvent) { 
     try { 
     document.createEvent('GestureEvent'); 
     return true; 
     } catch (e) { 
     return false; 
     } 
    } 
    } 

, 나는 단지 정말 사파리와 아이폰에 사용했습니다. 철저히 시험하십시오.