使用 javascript 检测手机/平板电脑/网络客户端

Question

我正在尝试检测最终用户是在手机、平板电脑还是个人电脑上

我已经在谷歌上搜索了一段时间，显然没有简单的解决方案。

好吧，我想我不应该使用分辨率，因为现在有些平板电脑具有惊人的分辨率。

我不应该依赖方向，因为 windows8 笔记本电脑可以像平板电脑一样旋转。 （而且响应式设计对我目前的项目来说太难了）

我一直在尝试使用 UserAgent（认为它也有其缺点），但无法使其正常工作，下面是我用来区分手机/平板电脑和 PC 的在线不同版本的组合，他们只是这样做不工作，我不知道为什么

var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile'];
                for(i in agents) {
                    if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) {
                        return true;
                    }
                }


if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
                return true;
            }

 if( navigator.userAgent.match(/Android/i)
                 || navigator.userAgent.match(/webOS/i)
                 || navigator.userAgent.match(/iPhone/i)
                 || navigator.userAgent.match(/iPad/i)
                 || navigator.userAgent.match(/iPod/i)
                 || navigator.userAgent.match(/BlackBerry/i)
                 || navigator.userAgent.match(/Windows Phone/i)
                 || navigator.userAgent.match(/bada/i)
                 || navigator.userAgent.match(/Bada/i)
                 ){
                return true;
            }

Answer 1

用户代理非常不可靠，实际上可以被客户端伪造。我建议专注于特定功能而不是特定设备。 Modernizer 是一个库，可用于检测客户端设备上是否有可用的功能。这将允许您检测本地存储等是否可用。如果您对 Responsive Web Design 之类的东西感兴趣，而不是设备/客户端特定功能，您可以使用 Twitter 的 Bootstrap 之类的库。在 Scaffolding 页面的底部，它甚至有一些功能可以检测手机、平板电脑和台式机，尽管我相信它是基于分辨率的。

--编辑添加--

我还想强调的是，您应该问问自己，为什么您真正关心用户使用的是什么设备。检测您关心的特定功能比检测所有可用功能要容易得多。

Answer 2

我建议查看媒体查询和<viewport> 标签。

一些关于响应式设计背后的思考过程的优秀文章。

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

问题仍然存在，你想完成什么？

Answer 3

是的，您不应依赖分辨率或方向。但是基于 em 的媒体查询呢？

为了使用 javascript 读取媒体查询的结果，您可以尝试将媒体查询添加到您的 css 以向您的页面添加不可见的内容：

@media all and (max-width: 45em) {
    body:after {
        content: 'smallscreen';
        display: none;
    }
}

然后通过javascript读取内容：

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');

然后确定你要加载的内容：

if (size.indexOf('smallscreen') !=-1) {
    // Load some content for smaller screens.
}

Answer 4

快速回答为什么代理匹配对给定列表不起作用：“Android”不在返回的（代理）字符串中！ 假设给定的字符串中没有一个是正确的，而且骗子比比皆是。

我已经发布了证明 android 案例的测试代码。