使用 javascript 检测手机/平板电脑/网络客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15100234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect phone/tablet/web client using javascript
提问by Matthew Yang
I am trying to detect if the end user is on a phone, a tablet or a pc
我正在尝试检测最终用户是在使用手机、平板电脑还是个人电脑
I have been Googling for a while, apparently there are no easy solution.
我一直在谷歌搜索一段时间，显然没有简单的解决方案。
Well I guess I should not use Resolution, since nowadays some tablets have amazing resolutions.
好吧，我想我不应该使用分辨率，因为现在有些平板电脑具有惊人的分辨率。
I should not rely on orientation, because windows8 laptops can just rotate like tablets. (and responsive design is just too difficult for my current project)
我不应该依赖方向，因为 windows8 笔记本电脑可以像平板电脑一样旋转。（响应式设计对于我当前的项目来说太难了）
I've been trying to use UserAgent(thought it has its drawbacks too), but can not get it working, below is a conjunction of different versions online that I am using to distinguish phone/tablet from PCs, they just do not work and I have no idea why
我一直在尝试使用 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;
}
回答by Jani Hyyti?inen
Yes, you should not rely on resolution or orientation. But how about em-based media queries?
是的，您不应该依赖分辨率或方向。但是基于 em 的媒体查询呢？
In order to read the results of your media query with javascript, you could try adding a media query to your css to add invisible content to your page:
为了使用 javascript 读取媒体查询的结果，您可以尝试将媒体查询添加到您的 css 以向您的页面添加不可见的内容：
@media all and (max-width: 45em) {
body:after {
content: 'smallscreen';
display: none;
}
}
Then read the content through javascript:
然后通过javascript读取内容：
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
Then determine what you want to load:
然后确定要加载的内容：
if (size.indexOf('smallscreen') !=-1) {
// Load some content for smaller screens.
}
回答by TwentyMiles
User Agents are pretty unreliable, and can actually be faked by clients. I would recommend to focus on specific functionality instead of specific devices. Modernizeris a library that can be used to detect if features are available on the client device. This will allow you to detect if things like local storage, etc are available. If you are interested in something like Responsive Web Designinstead of device/client specific features, you could use a library like Twitter's Bootstrap. At the bottom of the Scaffolding page, it even has some features that enable detection of phone vs. tablet vs. desktop, although I believe that it is based on resolution.
用户代理非常不可靠，实际上可以被客户端伪造。我建议专注于特定功能而不是特定设备。Modernizer是一个库，可用于检测客户端设备上的功能是否可用。这将允许您检测本地存储等是否可用。如果您对响应式网页设计之类的东西而不是设备/客户端特定功能感兴趣，您可以使用像 Twitter 的Bootstrap这样的库。在 Scaffolding 页面的底部，它甚至有一些功能可以检测手机、平板电脑和台式机，尽管我相信它是基于分辨率的。
--Edit to add--
--编辑添加--
I would also like to emphasize that you should ask yourself why you actually care what device the user is on. It will be much easier to detect the specific feature you care about than it will be to detect all features that are available.
我还想强调的是，你应该问问自己，你为什么真正关心用户使用的是什么设备。检测您关心的特定功能比检测所有可用功能要容易得多。
回答by Adrian J. Moreno
I'd recommend looking into media queries and the <viewport>tag.
我建议查看媒体查询和<viewport>标签。
Some excellent articles on the thought processes behind responsive design.
一些关于响应式设计背后的思维过程的优秀文章。
http://www.html5rocks.com/en/mobile/mobifying/
http://www.html5rocks.com/en/mobile/mobifying/
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
The question remains, what are you trying to accomplish?
问题仍然存在，你想完成什么？
回答by Robert Baer
Quick answer why match of agent does not work against the given list: "Android" is not in the returned (agent) string! Just assume that NONE of the given strings are correct and liars abound.
快速回答为什么代理的匹配对给定的列表不起作用：“Android”不在返回的（代理）字符串中！假设给定的字符串中没有一个是正确的，骗子比比皆是。
I have posted tested code proving the android case.
我已经发布了证明 android 案例的测试代码。
