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

Question

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

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

score 9 · Accepted Answer

9

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

适用于 Javascript、jQuery 等。

于 2013-03-12T15:34:13.163 回答

score 8 · Accepted Answer

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

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

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

score 7 · Accepted Answer

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

var mousedown = 'mousedown';

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

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

然后使用 CSS 媒体查询来处理屏幕宽度（使用 javascript 也很容易检测屏幕宽度）。这样您就可以正确处理具有大屏幕的触摸设备或具有小屏幕的非触摸设备。

score 0 · Accepted Answer

如果您使用modernizr。一个“无接触”类将被添加到元素中。如果“无触摸”类存在，您可以默认隐藏该栏并添加一个 CSS 规则以显示该栏。例子：

默认：

.bar{display:none;}

桌面：

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

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

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

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

score 0 · Accepted Answer

 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');
}

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

7 回答 7

Related

Reference