我正在寻找一个函数，返回一个布尔值，如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数，但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易，我认为这个问题已经解决了很多次，所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站，但不幸的是，脚本是如此神秘，我不知道如何使用它为我的目的，这是创建一个返回true/false的函数。
当前回答
像这样的怎么样?
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
其他回答
如何:
if (typeof screen.orientation !== 'undefined') { ... }
.．.因为智能手机通常支持这个属性，而桌面浏览器不支持。在MDN中见。
编辑1:正如@Gajus指出的，窗口。Orientation现在已弃用，不应该使用。
编辑2:您可以使用实验屏幕。Orientation而不是弃用的window.orientation。在MDN中见。
编辑3:从窗口更改。朝向屏幕。朝向
一旦元素获得焦点，就可以立即模糊它。Bootstrap-datepicker是一个非常受欢迎且维护良好的组件，在GitHub中有近10,000个星星，它使用了这种方法:
if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
this.input.blur();
}
https://github.com/uxsolutions/bootstrap-datepicker
谢谢跳跳虎的帮助。
我还没看到有人建议:
window.navigator.connection.type
这只存在于移动设备上，不存在于桌面浏览器上。检查该属性是否存在更简单，即if(window && window。Navigator && window.navigator.connection && window.navigator.connection.type) =>那么它是移动的
注意:这是实验性的
EDIT(07.2022):该功能被认为是一个潜在的跟踪漏洞，因此将从最新版本中删除。换句话说，不要用这个!
我遇到过一些情况，上面的答案对我不起作用。所以我想到了这个。可能对某人有帮助。
if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
|| screen.availWidth < 480){
//code for mobile
}
这取决于您的用例。如果你专注于屏幕使用屏幕。availWidth，或者你可以使用document.body. clientwidth如果你想基于document进行渲染。
啊，是的，这个古老的问题……
这取决于你对知识的反应。
1. 你想改变UI，让它适合不同的屏幕尺寸吗?
使用媒体查询。
2. 你想显示/隐藏东西或改变基于鼠标和触摸的功能吗?
上面的答案可以解决问题，但也可能出现用户同时拥有两个选项并切换的情况。在这种情况下，当你检测到鼠标或触摸事件时，你可以切换一些JS变量和/或向文档主体添加一个类
window.addEventListener("mousemove", function () {
isTouch = false;
document.body.classList.add("canHover");
});
window.addEventListener("touchstart", function () {
isTouch = true;
document.body.classList.remove("canHover");
});
body.canHover #aButtonOrSomething:hover {
//css attributes
}
document
.getElementById("aButtonOrSomething")
.addEventListener("mouseover", showTooltip);
document
.getElementById("aButtonOrSomething")
.addEventListener("click", function () {
if (isTouch) showTooltip();
});
3.你想做一些具体的事情，知道他们有什么设备吗?
使用公认的答案。
