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

Question

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

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

嗯，我想我不应该使用 Resolution，因为现在有些平板电脑的分辨率非常好。

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

是的，您不应该依赖分辨率或方向。但是基于 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.
}