简单的JavaScript检测用户的设备

Question

我想在模板中添加JavaScript，以检测用户每次使用哪种设备（智能手机，平板电脑或PC）查看我的网站。

目前，我尝试使用javascript进行操作，如下所示：

var smartPhone = "smartphone";
var Ipod = "ipod";

var userDevice = navigator.userAgent.toLowerCase();

function DetectPhone()
{
   if (userDevice.search(smartPhone) > -1)
      return true;
   else
      windows.location = "/pageforphone.aspx";
}

function DetectIpod()
{
   if (userDevice.search(Ipod) > -1)
      return true;
   else
      windows.location = "/pageforpod.aspx";
}

我写的代码正确吗？ 老实说，没有iPhone ...

当然，如果这些都用Php或Asp.net完成会更好，但是人们总是在其Palm设备上关闭javascript吗？ 另外，我认为iphone或ipod或任何其他平板电脑都非常相似，可以为这些设备使用相同的redev页面吗？ 实际上，我不太了解它们之间的区别以及重新定义网页时应注意的事项。

Answer 1

这个问题的前提是浏览器嗅探是可以接受的，这是错误的。 绝对不要因为无法自信地完成您打算完成的工作而进行浏览器嗅探。 用户代理字符串不是一成不变的，并且经常通过客户端计算机上安装的插件或客户端本身进行更改（这并不罕见，因为不良的程序员可能会基于其UA-String将其锁定在站点之外）。

与其问用户是哪台设备，不如问用户该设备具备什么功能 。 这将带您进行功能检测 ，在这里您开始执行X，测试以查看用户代理是否能够执行X，然后继续执行X。例如：

if ( !!document.createElement("video").canPlayType ) {
  console.log( "HTML5 Video Supported" );
}

这比尝试查看用户是否在iPhone，iPad，Windows Tablet或启用HTML5的浏览器上更为可靠。 您可以使用Modernizr之类的工具为您执行许多此类测试-实际上超过40种。

Answer 2

市场上有许多移动设备+每个设备可以安装多个浏览器。 我宁愿使用一些库，也不希望在用户代理字符串中为“ iPhone”提供资金（我自己将Android手机与Opera浏览器一起使用）

例如：

• http://detectmobilebrowsers.mobi/
• http://wurfl.sourceforge.net/-服务器端，具有支持的设备和功能的大型数据库
• http://modernizr.com-客户端大小的JavaScript库，检测浏览器上可用的HTML5功能（例如，地理位置API，视频，索引数据库，本地存储等）

两者都会定期更新，并会发布最新的移动设备，并为您提供给定设备支持哪些功能的信息

Answer 3

这就是我使用JavaScript检测iOS设备的方式

<script type="text/javascript">
    var agent = navigator.userAgent.toLowerCase();
    var isiPhone = ((agent.indexOf('iphone'))!=-1)

    if (((agent.indexOf('iphone'))!=-1) {
        document.location = "mobile.aspx?device=iphone";
    }

    if (((agent.indexOf('ipod'))!=-1) {
        document.location = "mobile.aspx?device=ipod";
    }

    if (((agent.indexOf('iPad'))!=-1) {
        document.location = "mobile.aspx?device=ipad";
    }
</script>