如何使用JavaScript检测移动设备？
我被要求创build一个实际的HTML页面/ JavaScript来模拟使用JavaScript代码检测移动设备（iPhone / iPad / Android）。 然后这将使用户到另一个屏幕，要求他们的电子邮件地址。
我知道这个答案迟了3年，但没有其他答案确实是100％正确的。 如果您想要检测用户是否使用任何forms的移动设备（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. } 您将检测到请求的浏览器用户代理string，然后根据它来自移动浏览器的内容来决定它。 这个设备并不完美，从来不会因为用户代理没有针对移动设备进行标准化（至less不是我所知）。
本网站将帮助您创build代码： http : //www.hand-interactive.com/resources/detect-mobile-javascript.htm
例如 ：
您可以通过执行以下操作在JavaScript中获取用户代理：
var uagent = navigator.userAgent.toLowerCase();
然后按照与此相同的格式进行检查（仅仅使用iPhone作为一个简单的例子，但其他的则需要有点不同）
function DetectIphone() { if (uagent.search("iphone") > -1) alert('true'); else alert('false'); }
编辑
你会创build一个简单的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>
一个非常简单的解决scheme是检查屏幕宽度。 由于几乎所有移动设备的最大屏幕宽度都是480像素（目前），因此非常可靠：
if( screen.width <= 480 ) { location.href = '/mobile.html'; }
用户代理string也是一个看看的地方。 然而，前者的解决scheme还是比较好，即使有些怪异的设备对用户代理没有正确的响应，屏幕宽度也不会说谎。
这里唯一的例外是平板电脑就像ipad。 这些设备有比智能手机更高的屏幕宽度，我可能会用这些用户代理string。
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 }
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null || screen.width <= 480;
一个简单的解决scheme可能只是CSS。 您可以在样式表中设置样式，然后在底部调整样式。 现代智能手机的performance就像他们只有480px宽，而他们实际上更多。 在css中检测较小屏幕的代码是
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) { #hoofdcollumn {margin: 10px 5%; width:90%} }
希望这可以帮助！
我使用mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
所以我做了这个。 谢谢你们！
<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>
既然现在是2015年，如果你偶然发现这个问题，那么你可能应该使用window.matchMedia （如果它仍然是2015年，老年浏览器的polyfilling ）：
if (matchMedia('handheld').matches) { //... } else { //... }
您可以使用用户代理string来检测这个。
var useragent = navigator.userAgent.toLowerCase(); if( useragent.search("iphone") ) ; // iphone else if( useragent.search("ipod") ) ; // ipod else if( useragent.search("android") ) ; // android etc
你可以在这里finduseragentstring的列表http://www.useragentstring.com/pages/useragentstring.php
我build议你看看http://wurfl.io/
简而言之，如果您导入一个微小的JS文件：
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
您将留下一个JSON对象，如下所示：
{ "complete_device_name":"Google Nexus 7", "is_mobile":true, "form_factor":"Tablet" }
（当然假设你使用的是Nexus 7），你将可以执行如下操作：
WURFL.complete_device_name
这是你在找什么。
免责声明：我为提供这项免费服务的公司工作。 谢谢。
确定用户代理用于需要模拟的设备，然后根据该variablestestingvariables。
例如：
// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent var userAgent = "iphone"; /* Simulates User Agent for iPhone */ if (userAgent.indexOf('iphone') != -1) { // some code here }
这是如何检查网页是否在桌面或移动应用程序加载的例子。
JS将在页面加载执行，你可以在页面加载时执行桌面特定的东西，例如隐藏条形码扫描器。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> /* * Hide Scan button if Page is loaded in Desktop Browser */ function hideScanButtonForDesktop() { if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) { // Hide scan button for Desktop document.getElementById('btnLinkModelScan').style.display = "none"; } } //toggle scanButton for Desktop on page load window.onload = hideScanButtonForDesktop; </script> </head>
这是我的版本，非常类似于上面的版本，但我认为很好的参考。
if (mob_url == "") { lt_url = desk_url; } else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") { lt_url = mob_url; } else { lt_url = desk_url; }
从Mozilla开发者站点： 设备特定的用户代理string
我觉得这个更精确一些，特别是针对移动设备的过滤。
基于用户代理的设备检测并不是很好的解决scheme，更好的办法是检测触摸设备等function（在新的jQuery中，他们删除了$.browser ，而是使用$.support ）。
要检测手机，您可以检查触摸事件：
function is_touch_device() { return 'ontouchstart' in window // works on most browsers || 'onmsgesturechange' in window; // works on ie10 }
采取从什么是使用JavaScript检测“触摸屏”设备的最佳方式？
只需使用DeviceDetection
deviceDetection.deviceType // phone | tablet according to device
另一种可能是使用mobile-detect.js 。 尝试演示 。
浏览器用法：
<script src="mobile-detect.js"></script> <script> var md = new MobileDetect(window.navigator.userAgent); // ... see below </script>
Node.js / Express：
var MobileDetect = require('mobile-detect'), md = new MobileDetect(req.headers['user-agent']); // ... see below
例：
var md = new MobileDetect( 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' + ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' + ' Version/4.0 Mobile Safari/534.30'); // more typically we would instantiate with 'window.navigator.userAgent' // as user-agent; this string literal is only for better understanding console.log( md.mobile() ); // 'Sony' console.log( md.phone() ); // 'Sony' console.log( md.tablet() ); // null console.log( md.userAgent() ); // 'Safari' console.log( md.os() ); // 'AndroidOS' console.log( md.is('iPhone') ); // false console.log( md.is('bot') ); // false console.log( md.version('Webkit') ); // 534.3 console.log( md.versionStr('Build') ); // '4.1.A.0.562' console.log( md.match('playstation|xbox') ); // false
