Question

所以我已经阅读了一些关于浏览器检测和特征检测的线程，而且我不确定我需要做什么才能进行讨论。

我有一个游戏网站。人们可以在电脑或移动设备上玩游戏。他们还可以配置他们希望游戏如何工作。例如，他们可以通过单击或双击来选择打牌。但是，双击不是移动设备上的选项，因此有些人会卡住，因为他们选择了该选项并且javascript无效。

所以我想，我会让人们为移动设备指定一组首选项，为PC设置另一组首选项，并且只提供这些设备上可用的选项。但是，我知道检测PC与移动设备是一种不好的方式。

那么，如果我是特征检测，我到底检测到了什么？没有办法检测设备是否特别支持双击，是吗？

Answer 1

似乎你真正想要做的是测试触摸支持，试试Detecting touch: it’s the ‘why’, not the ‘how’。

一个常见的建议是：

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

但在某些浏览器中可能会失败。更长的方法，虽然可能不再准确，但是直接测试事件支持：

  /* 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;
       }
     }
   }

它是在2008年写的，我只是在Safari和iPhone上使用它，虽然它似乎在其他地方工作。彻底测试。

Answer 2

您永远无法检测到PC或移动设备在哪里有效地访问您的网站，因为有太多设备而且它们会不断变化。唯一的方法是检查浏览器代理字符串，这非常繁琐;有成千上万的。此外，它可能是欺骗性的，因此它不是一个很好的信息来源。您可以做的最好（许多专业人士，包括我在内）使用特征检测技术 - 屏幕分辨率，支持的html标签，支持的CSS属性等。

一个很好的工具是Modenizr js库，它是基于功能的，您可以检查设备是否支持触摸事件，如果有，那么您知道双击不适合您。

以下是一些文档http://modernizr.com/docs/#features-misc

的链接

浏览器检测 - 移动与PC

2 个答案: