7

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

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

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

我不应该依赖方向，因为 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;
            }
4

4 回答 4

12

是的，您不应该依赖分辨率或方向。但是基于 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.
}
于 2013-02-27T00:05:09.420 回答
3

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

--编辑添加--

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

于 2013-02-26T23:02:34.903 回答
2

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

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

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

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

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

于 2013-02-26T23:10:58.067 回答
-1

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

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

于 2013-09-05T03:32:11.640 回答