我在我的网站上显示了一个通知栏，坦率地说，它在移动设备上运行时效果不佳。我想只为桌面用户显示栏。
确定用户是在桌面上还是在移动设备上的最简单方法是什么？
答案 0 :(得分：8)
选中此http://detectmobilebrowsers.com/
为Javascript，jQuery等工作。
答案 1 :(得分：7)
用户代理检查是“最简单的”，但您可以轻松使用CSS3 media queries
这是一个检查iphone，android和blackberry的例子;您可以轻松添加其他移动浏览器。
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
答案 2 :(得分：7)
我发现最好使用特征检测。使用Modernizr检测它是否为触控设备。你可以这样做：
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
然后使用CSS Media Queries来处理屏幕宽度（并且使用javascript也很容易检测屏幕宽度）。这样您就可以正确处理大屏幕触摸设备或小屏幕非触摸设备。
答案 3 :(得分：0)
如果您使用modernizr。 a＆＃34; no-touch＆＃34; class将被添加到元素中。您可以默认隐藏栏，并添加一个css规则来显示栏，如果＆＃34; no-touch＆＃34;类存在。例如：
默认：
.bar{display:none;}
桌面：
.no-touch .bar{display:block;}
答案 4 :(得分：0)
如果用户在移动设备上，则此JavaScript'if'将返回true。
if（navigator.userAgent.indexOf（'Mobile'）！== -1）{...
另请参阅：https://deviceatlas.com/blog/list-of-user-agent-strings
答案 5 :(得分：0)
区分触摸和非触摸设备的最简单方法是使用媒体查询。
1）可以使用媒体查询编写针对移动/触摸设备的CSS，
@media (hover: none), (pointer: coarse) {}
2）可以使用媒体查询编写针对台式机/非触摸设备的CSS（仅），
@media not all and (pointer: coarse) {}
在很少的最新移动设备（例如，IOS 10+，一个加号等）上，检测到悬停，因此我们使用（2）来识别非触摸设备。
答案 6 :(得分：0)
<iframe src="<<URL>>" height="500" width="600" scrolling="no" style="overflow: hidden"></iframe>