如何使用 JavaScript 检测移动设备？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6666907/
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
How to detect a mobile device with JavaScript?
提问by Jeevs
I have been asked to create an actual HTML page / JavaScript to simulate detection of the mobile devices (iPhone / iPad / Android) using JavaScript code. This will then take the user to a different screen which asks them for their email address.
我被要求创建一个实际的 HTML 页面/JavaScript 来模拟使用 JavaScript 代码检测移动设备（iPhone/iPad/Android）。这将把用户带到一个不同的屏幕，要求他们提供他们的电子邮件地址。
回答by Baraa
I know this answer is coming 3 years late but noneof the other answers are indeed 100% correct. If you would like to detect if the user is on ANY form of mobile device (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), then you can use the following code:
我知道这个答案即将到来晚了3年，但没有其他的答案确实是100％正确的。如果您想检测用户是否使用任何形式的移动设备（Android、iOS、BlackBerry、Windows Phone、Kindle 等），则可以使用以下代码：
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
}
回答by slandau
You would detect the requesting browsers user agent string, and then decide based on what it is if it's coming from a mobile browser or not. This device is not perfect, and never will be due to the fact that user agents aren't standardized for mobile devices (at least not to my knowledge).
您将检测请求浏览器的用户代理字符串，然后根据它是否来自移动浏览器来决定它是什么。这个设备并不完美，永远不会是因为用户代理没有针对移动设备进行标准化（至少据我所知）。
This site will help you create the code: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
该站点将帮助您创建代码：http: //www.hand-interactive.com/resources/detect-mobile-javascript.htm
Example:
示例：
You could get the user agent in javascript by doing this:
您可以通过执行以下操作在 javascript 中获取用户代理：
var uagent = navigator.userAgent.toLowerCase();
And then do the check's in the same format as this (just using iPhone as a quick example, but others would need to be a little bit different)
然后以与此相同的格式进行检查（仅使用 iPhone 作为快速示例，但其他人需要稍有不同）
function DetectIphone()
{
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
Edit
编辑
You'd create a simple HTML page like so:
您将创建一个简单的 HTML 页面，如下所示：
<html>
<head>
<title>Mobile Detection</title>
</head>
<body>
<input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
</body>
</html>
<script>
function DetectIphone()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
</script>
回答by jAndy
A pretty simple solution is to check for the screen width. Since almost all mobile devices have a max screen width of 480px (at present), it's pretty reliable:
一个非常简单的解决方案是检查屏幕宽度。由于几乎所有移动设备的最大屏幕宽度为 480px（目前），因此非常可靠：
if( screen.width <= 480 ) {
location.href = '/mobile.html';
}
The user-agent string is also a place to look. However, the former solution is still better since even if some freaking device does not respond correctly for the user-agent, the screen width doesn't lie.
用户代理字符串也是一个查看的地方。但是，前一种解决方案仍然更好，因为即使某些该死的设备没有为用户代理正确响应，屏幕宽度也不会说谎。
The only exception here are tablet pc's like the ipad. Those devices have a higher screen width than smartphones and I would probably go with the user-agent-string for those.
这里唯一的例外是平板电脑，如 ipad。这些设备的屏幕宽度比智能手机高，我可能会使用 user-agent-string。
回答by Ahmed Abu Eldahab
if(navigator.userAgent.match(/iPad/i)){
//code for iPad here
}
if(navigator.userAgent.match(/iPhone/i)){
//code for iPhone here
}
if(navigator.userAgent.match(/Android/i)){
//code for Android here
}
if(navigator.userAgent.match(/BlackBerry/i)){
//code for BlackBerry here
}
if(navigator.userAgent.match(/webOS/i)){
//code for webOS here
}
回答by kolypto
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null
|| screen.width <= 480;
回答by Ivotje50
A simple solution could be css-only. You can set styles in your stylesheet, and then adjust them on the bottom of it. Modern smartphones act like they are just 480px wide, while they are actually a lot more. The code to detect a smaller screen in css is
一个简单的解决方案可能是 css-only。您可以在样式表中设置样式，然后在其底部进行调整。现代智能手机表现得好像只有 480 像素宽，而实际上它们的宽度要大得多。在 css 中检测较小屏幕的代码是
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
Hope this helps!
希望这可以帮助！
回答by CSepúlveda
So I did this. Thank you all!
所以我做了这个。谢谢你们！
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
</head>
<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>
</html>
回答by Chris Devereux
Since it's now 2015, if you stumbled across this question then you should probably be using window.matchMedia(and, if it's still 2015, polyfillingfor older browsers):
由于现在是 2015 年，如果您偶然发现了这个问题，那么您可能应该使用window.matchMedia（如果仍然是 2015 年，则为旧浏览器进行polyfill）：
if (matchMedia('handheld').matches) {
//...
} else {
//...
}
回答by individuo7
I use mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
我用 mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
回答by Luca Passani
I advise you check out http://wurfl.io/
我建议您查看http://wurfl.io/
In a nutshell, if you import a tiny JS file:
简而言之，如果你导入一个很小的 JS 文件：
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
you will be left with a JSON object that looks like:
您将得到一个 JSON 对象，如下所示：
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(that's assuming you are using a Nexus 7, of course) and you will be able to do things like:
（当然，这是假设您使用的是 Nexus 7）并且您将能够执行以下操作：
WURFL.complete_device_name
This is what you are looking for.
这就是你要找的。
Disclaimer: I work for the company that offers this free service. Thanks.
免责声明：我为提供此免费服务的公司工作。谢谢。
