Just don't use this, use feature detection instead. There are so many devices and brands out there that targeting a brand NEVER will be the right solution.
function isMobile()
{
return "ontouchstart" in window;
}
1
最好的必须是：
var isMobile = (/Mobile/i.test(navigator.userAgent));
但就像Yoav Barnea说...
// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;
在这3次测试之后，我希望var isMobile是......好的
0
这样的事怎么样？
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
13
检测移动设备或平板设备的一种非常好的方法是查看浏览器是否可以创建触摸事件 .
纯JavaScript代码：
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
这对我很有用，但笔记本电脑设备可能存在问题，包括触摸屏显示器 .
我不确定触摸屏笔记本电脑是否会被检测为移动设备，因为我还没有测试过它 .
280
那么使用“window.screen.width”呢？
if (window.screen.width < 800) {
// do something
}
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
// Used to detect whether the users browser is an mobile browser
function isMobile() {
///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>
if (sessionStorage.desktop) // desktop storage
return false;
else if (localStorage.mobile) // mobile storage
return true;
// alternative
var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;
// nothing found.. assume desktop
return false;
}
var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');
1
这是一个比匹配更有效的userAgent解决方案......
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
1
return 'ontouchstart' in window && window.screen.availWidth < 768
怎么样，它扩展了上面的答案，但也检查屏幕大小
1
这也可以是一种解决方案 .
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
console.log('Mobile device:'+isMobile);
var doc_h = $(document).height(); // returns height of HTML document
var doc_w = $(document).width(); // returns width of HTML document
console.log('Height: '+doc_h);
console.log('width: '+doc_w);
var iPadVertical = window.matchMedia("(width: 768px) and (height: 1024px) and (orientation: portrait)");
var iPadHoricontal = window.matchMedia("(width: 1024px) and (height: 767px) and (orientation: landscape)");
console.log('Height: '+doc_h);
console.log('width: '+doc_w);
if (iPadVertical.matches) {
console.log('Ipad vertical detected');
}else if (iPadHoricontal.matches){
console.log('Ipad horicontal detected');
}else {
console.log('No Ipad');
}
30 回答
这只是我在项目中使用的accepted answer的es6端口 . 请注意，这还包括平板电脑 .
这是我对该问题的重新思考解决方案 . 仍然不完美 . 唯一真正的解决方案是，如果设备制造商开始认真对待“移动”和“平板电脑”用户代理字符串 .
当Nexus 7平板电脑只有Android UA字符串时会发生什么？首先，移动成为现实，比后来平板电脑也成为现实，但平板电脑将从机身标签中删除Mobile UA字符串 .
CSS：
为开发添加了
alert行 . Chrome控制台可以模拟许多手持设备 . 在那里测试 .EDIT:
Just don't use this, use feature detection instead. There are so many devices and brands out there that targeting a brand NEVER will be the right solution.
这是一个来自facebook's slingshot源码的简单解决方案
继承人一个班轮
根据 MDN's article on Browser detection using the user agent ，鼓励尽可能避免这种方法，并建议其他途径，如特征检测 .
但是，如果必须使用用户代理作为检测设备是否为移动设备的方法，他们建议：
因此，这个单线程就足够了：
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");您也可以按照本教程检测特定的移动设备 . 单击here .
有一个简单的技巧来检测它是否是移动设备 . 只需检查 ontouchstart 事件是否存在：
最好的必须是：
但就像Yoav Barnea说...
在这3次测试之后，我希望var isMobile是......好的
这样的事怎么样？
检测移动设备或平板设备的一种非常好的方法是查看浏览器是否可以创建触摸事件 .
纯JavaScript代码：
这对我很有用，但笔记本电脑设备可能存在问题，包括触摸屏显示器 .
我不确定触摸屏笔记本电脑是否会被检测为移动设备，因为我还没有测试过它 .
那么使用“window.screen.width”呢？
要么
我想这是最好的方法，因为每天都有新的移动设备！
（虽然我认为它不是旧浏览器支持的，但试一试:)）
取决于用例 . 所有移动设备都需要电池 . 如果您所追求的是计算能力而不耗尽电池，请使用Battery Status API：
如果你正在寻找的是表示使用matchMedia，它返回一个布尔值：
或者将它们结合起来，以便在平板设备上获得更好的用户体
正如许多人所说，依赖于用户代理数据的移动目标是有问题的 . 计算屏幕尺寸也是如此 . 我的方法是借用CSS技术来确定界面是否触摸 . 使用纯javascript（所有现代浏览器支持），媒体查询可以轻松确定设备何时移动 .
如果您正在寻找手机，因为在大多数情况下它们都是纵向的，您可以使用这个简单的检查：
注意：这不是一个可靠的解决方案，但在大多数情况下都可以使用！
来到这里寻找一种简单，干净的方式来检测“触摸屏设备”，我将其归类为移动设备和平板电脑 . 在当前的答案中没有找到一个干净的选择，但确实做了以下可能也有帮助的人 .
Edit ：要同时支持带触摸屏和手机的桌面，您可以使用以下内容：
怎么样：
...因为智能手机通常支持此属性，而桌面浏览器则不支持 .
要添加额外的控制层，我使用HTML5存储来检测它是使用移动存储还是桌面存储 . 如果浏览器不支持存储，我有一系列移动浏览器名称，我将用户代理与阵列中的浏览器进行比较 .
这很简单 . 这是功能：
我建议你退房http://wurfl.io/
简而言之，如果您导入一个微小的JS文件：
你将留下一个看起来像这样的JSON对象：
（假设您正在使用Nexus 7），您将能够执行以下操作：
这就是你要找的 .
免责声明：我为提供此免费服务的公司工作 . 谢谢 .
这是他的全部功能
这是一个ECMAScript 6解决方案（TypeScript ready）
功能检测比试图找出你所使用的设备要好得多，并且很难跟上新设备的出现，像Modernizr这样的库让你知道某个特定功能是否可用 .
如何使用
要检查用户是否在特定移动设备上：
参考：http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
github上的增强版：https://github.com/smali-kazmi/detect-mobile-browser
没有完美的解决方案来检测JS代码是否在移动浏览器上执行，但在大多数情况下，以下两个选项都可以使用 .
选项1：浏览器嗅探
这个特定的浏览器嗅探代码是a library called isMobile .
选项2：window.orientation
测试是否定义了
window.orientation：注意
并非所有触摸屏设备都是移动设备，反之亦然 . 因此，如果您想专门针对触摸屏实施某些功能，则不应测试您的浏览器是否在移动设备上运行，而是测试设备是否具有触摸屏支持：
这是一个比匹配更有效的userAgent解决方案......
怎么样，它扩展了上面的答案，但也检查屏幕大小
这也可以是一种解决方案 .
如果您使用这两种方法，您将获得检测不同设备的完美方法 .
使用Regex（来自detectmobilebrowsers.com）：
这是一个使用疯狂长而全面的正则表达式的函数，它根据用户是否正在使用移动设备进行浏览来返回真值或假值 .
对于那些希望在此测试中包含平板电脑的人（尽管可以说，你不应该），你可以使用以下功能：
原始答案
您可以通过简单地运行设备列表并检查useragent是否匹配任何类似的东西来完成此操作：
但是，由于您认为此方法不可靠，您可以假设分辨率为800x600或更低的任何设备也是移动设备，甚至更多地缩小您的目标（尽管现在许多移动设备的分辨率远高于此）
即
Reference:
请注意，大多数新一代移动设备现在的分辨率大于600x400 . 即iPhone 6 ....
测试证明：在这里运行最受欢迎和最近的帖子，可选检查一次运行如下：
不知何故，以下浏览器应用程序返回以下结果 . 规格：iPhone 6S，iOS 10.3.1 .
Safari（最新）：将其检测为移动设备 .
Chrome（最新）：未将其检测为移动设备 .
那么，我接着测试了Lanti（https://stackoverflow.com/a/31864119/7183483）的建议，它确实返回了正确的结果（适用于所有iOS设备的移动设备，适用于我的Mac的桌面设备） . 因此，我开始编辑它，因为它会发射两次（对于手机和平板电脑） . 然后我注意到在iPad上进行测试时，它也作为移动设备返回，这是有道理的，因为Lanti使用的参数检查操作系统比什么都重要 . 因此，我只是将移动支票内的平板电脑IF语句移动，这将返回移动设备，平板电脑检查是否定的，否则平板电脑 . 然后我为移动支票添加了else子句以返回桌面/笔记本电脑，因为两者都符合条件，但随后注意到浏览器检测到CPU和OS品牌 . 所以我添加了返回的内容作为else if语句的一部分 . 为了限制它，我添加了一个警告性的其他声明，以防万一没有检测到 . 请参阅下文，将很快通过Windows 10 PC上的测试进行更新 .
哦，我还添加了一个'debugMode'变量，可以在调试和正常编译之间轻松切换 .
免责声明：完全归功于Lanti，也未在Windows平板电脑上测试过...这可能会返回台式机/笔记本电脑，因为操作系统是纯Windows . 一旦找到使用一个的朋友，我会检查 .
一旦元素获得焦点，您就会立即模糊它 . Bootstrap-datepicker是一个非常受欢迎且维护良好的组件，在GitHub中有近10,000颗星，使用这种方法：
https://github.com/uxsolutions/bootstrap-datepicker
感谢Tigger的帮助 .
在任何情况下，检查设备类型必须只调用一次：你的手机不能在一瞬间保持桌面:)
因此，前一段时间建议的userAgent检查代码必须如此：