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

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

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

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

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

最佳答案

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

关于javascript - 使用javascript检测电话/平板电脑/网络客户端，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15100234/