确定用户是否在移动设备上的最简单方法

Question

我在我的网站上显示了一个通知栏，坦率地说，当它在移动设备上时效果不佳。 我只想为桌面用户显示该栏。

确定用户是使用台式机还是移动设备的最简单方法是什么？

Answer 1

检查这个http://detectmobilebrowsers.com/

为 Javascript、jQuery 等工作。

Answer 2

用户代理检查是“最简单的”，尽管您可以轻松使用CSS3 媒体查询

下面是一个检查 iphone、android 和 blackberry 的例子； 您可以轻松添加其他移动浏览器。

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;

Answer 3

我发现最好使用特征检测。 使用Modernizr检测它是否是触摸设备。 您可以执行以下操作：

var mousedown = 'mousedown';

if (Modernizr.touch) {
    mousedown = 'touchstart';
}

$('.foo').on(mousedown, handleMouseDown);

然后使用 CSS Media Queries 处理屏幕宽度（使用 javascript 检测屏幕宽度也很容易）。 这样您就可以正确处理大屏幕的触摸设备，或小屏幕的非触摸设备。

Answer 4

如果您使用Modernizr 。 一个“非接触”类将被添加到元素中。 如果存在“no-touch”类，您可以默认隐藏栏并添加 css 规则以显示栏。 例子：

默认：

.bar{display:none;}

桌面：

.no-touch .bar{display:block;}

Answer 5

如果用户在移动设备上，此 javascript 'if' 将返回 true。

if (navigator.userAgent.indexOf('Mobile') !== -1) { ...

另请参阅： https : //deviceatlas.com/blog/list-of-user-agent-strings

Answer 6

区分触摸设备和非触摸设备的最简单方法是使用媒体查询。

1) 可以使用媒体查询编写针对移动/触摸设备的 CSS，

  @media (hover: none), (pointer: coarse) {}

2) 可以使用媒体查询编写针对桌面/非触摸设备（仅限）的 CSS，

  @media not all and (pointer: coarse) {}

在少数最新的移动设备（例如：IOS 10+、一加等）上检测到悬停，因此我们使用 (2) 来识别非触摸设备。

Answer 7

 const is_mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i);

if (is_mobile != null){
    popup.modal('show');
}

Answer 8

如果您正在阅读 2021 年的这篇文章，那么还有一种更简单的方法可以找到它。

let isMobile = window.navigator.userAgentData.mobile;
console.log(isMobile);

上述方法只返回一个 boolean 值。