我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
当前回答
返回'ontouchstart'在window && window.screen. availwidth < 768
这个怎么样,它扩展了上面的答案,但也检查了屏幕大小
其他回答
检测手机或平板设备的一个好方法是查看浏览器是否可以创建触摸事件。
简单JavaScript代码:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
这对我来说效果很好,但是包含触摸屏的笔记本电脑设备可能会有一个问题。
我不确定触屏笔记本电脑是否会被视为移动设备,因为我还没有测试过。
这是一个比匹配更有效的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;
}
我遇到过一些情况,上面的答案对我不起作用。所以我想到了这个。可能对某人有帮助。
if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
|| screen.availWidth < 480){
//code for mobile
}
这取决于您的用例。如果你专注于屏幕使用屏幕。availWidth,或者你可以使用document.body. clientwidth如果你想基于document进行渲染。
我搜索了Replit的代码(因为它在网站上到处都是错误),直到我看到:
(function (isTouchDevice) {
if (!isTouchDevice) return;
var isTouchClass = 'is-touch-device';
var docElement = document.documentElement;
docElement.className = docElement.className ? [docElement.className, isTouchClass].join(' ') : isTouchClass;
})(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
所以我把它修改成这样:
function isTouchDevice() {
if (!(("ontouchstart" in window) || (window.DocumentTouch && document instanceof DocumentTouch))) {
return false
}
return true
}
来自不同用户代理的值:
Mozilla/5.0 (Windows NT 10.0;Win64;x64) AppleWebKit/537.36 (KHTML,像壁虎)Chrome/103.0.0.0 Safari/537.36: false Mozilla / 5.0 (Linux;Android 10;小米A2) AppleWebKit/537.36 (KHTML,像壁虎)Chrome/105.0.0.0移动Safari/537.36: true
正如许多人所说,依赖于用户代理数据的移动目标是有问题的。这同样适用于屏幕大小的计数。
我的方法借鉴了CSS技术来确定界面是否是触摸的:
只使用javascript(所有现代浏览器都支持),媒体查询匹配可以轻松推断设备是否是移动设备。
function isMobile() {
var match = window.matchMedia || window.msMatchMedia;
if(match) {
var mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}