浏览器检测-移动与PC

Browser Detection - Mobile vs. PC

本文关键字：PC 移动 检测 浏览器      更新时间：2024-06-27

所以我读了一些关于浏览器检测和特征检测的线程，我不确定我需要做什么属于讨论的范围。

我有一个游戏网站。人们可以在电脑或移动设备上玩游戏。他们还可以配置他们希望游戏如何工作。例如，他们可以通过单击或双击来选择打牌。然而，双击在移动设备上不是一个选项，所以有些人会陷入困境，因为他们选择了这个选项，javascript就不起作用了。

所以我想，我会让人们指定一组移动设备的偏好，另一组PC的偏好，并且只提供这些设备上可用的选项。然而，我读到，检测PC与移动设备是一种糟糕的方法。

那么，如果我在进行特征检测，我到底在检测什么呢？没有办法检测设备是否专门支持双击，是吗？

似乎你真正想做的是测试触摸支持，试试检测触摸：这是"为什么"，而不是"如何"。

一个常见的建议是：

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上真正使用过它，尽管它似乎在其他地方也能使用。彻底测试。

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

一个好的工具是Modenizr-js库，它是基于功能的，你可以检查设备是否支持触摸事件，如果支持，那么你就知道双击对你来说不是一个选项。

这是一些文档的链接http://modernizr.com/docs/#features-其他

相关文章：