javascript 确定用户是否在移动设备上的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15365352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest way to determine if user is on mobile device
提问by RailsTweeter
I'm showing a notification bar on my website, and frankly, it doesn't work well when its on a mobile device. I'd like to show the bar ONLY for desktop users.
我在我的网站上显示了一个通知栏，坦率地说，它在移动设备上效果不佳。我只想为桌面用户显示栏。
What is the easiest way to determine if a user is on desktop or on mobile?
确定用户是使用桌面设备还是移动设备的最简单方法是什么？
采纳答案by injetkilo
Check this http://detectmobilebrowsers.com/
检查这个 http://detectmobilebrowsers.com/
Work for Javascript, jQuery etc.
为 Javascript、jQuery 等工作。
回答by Jonathan Potter
I find that it's best to use feature detection. Use Modernizrto detect if it's a touch device. You can do things like:
我发现最好使用特征检测。使用Modernizr检测它是否是触摸设备。您可以执行以下操作：
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
And then use CSS Media Queries for handling screen width (and it's also easy to detect screen width with javascript). That way you can correctly handle touch devices with large screens, or non-touch devices with small screens.
然后使用 CSS Media Queries 处理屏幕宽度（使用 javascript 检测屏幕宽度也很容易）。这样您就可以正确处理大屏幕的触摸设备，或小屏幕的非触摸设备。
回答by Rob M.
A user agent check is the "easiest", though you could easily employ CSS3 media queries
用户代理检查是“最简单的”，尽管您可以轻松使用CSS3 媒体查询
Here is an example that checks iphone, android and blackberry; you could easily add other mobile browsers.
下面是一个检查 iphone、android 和 blackberry 的例子；您可以轻松添加其他移动浏览器。
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
回答by sidarcy
If you use modernizr. a "no-touch" class will be added to the element. You could hide the bar by default and add a css rule to show the bar if the "no-touch" class exists. Example:
如果您使用Modernizr。一个“非接触”类将被添加到元素中。如果存在“no-touch”类，您可以默认隐藏栏并添加 css 规则以显示栏。例子：
default:
默认：
.bar{display:none;}
.bar{display:none;}
desktop:
桌面：
.no-touch .bar{display:block;}
回答by Michael Shaw
If the user is on a mobile device this javascript 'if' will return true.
如果用户在移动设备上，此 javascript 'if' 将返回 true。
if (navigator.userAgent.indexOf('Mobile') !== -1) { ...
if (navigator.userAgent.indexOf('Mobile') !== -1) { ...
See also: https://deviceatlas.com/blog/list-of-user-agent-strings
回答by Sasi Kumar M
The easiest way to differentiate between touch and non-touch devices is using media queries.
区分触摸设备和非触摸设备的最简单方法是使用媒体查询。
1) CSS to target Mobile/Touch Devices can be written using media query,
1) 可以使用媒体查询编写针对移动/触摸设备的 CSS，
@media (hover: none), (pointer: coarse) {}
2) CSS to target Desktop/Non-Touch Devices (only) can be written using media query,
2) 可以使用媒体查询编写针对桌面/非触摸设备（仅限）的 CSS，
@media not all and (pointer: coarse) {}
On Few latest mobile devices (Eg: IOS 10+, one plus etc.,.) hover is detected hence we use, the (2) to identify non-touch devices.
在少数最新的移动设备（例如：IOS 10+、一加等）上检测到悬停，因此我们使用 (2) 来识别非触摸设备。
