css – 检测是否使用移动设备中的浏览器(iOS/Android手机/平板电脑)

前端之家收集整理的这篇文章主要介绍了css – 检测是否使用移动设备中的浏览器(iOS/Android手机/平板电脑)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法检测手持式浏览器是否被使用(iOS / Android手机/平板电脑)?

我尝试这样做的目的是使一个元素在手持设备上的浏览器的一半宽,但没有什么不同。

width: 600px;
@media handheld { width: 300px; }

可以做到吗?

编辑:从jmaes的回答中引用的页面我用过

@media only屏幕和(max-device-width:480px)。

解决方法

更新(2016年6月):我现在尝试在每个分辨率上支持触摸和鼠标输入,因为设备横向缓慢地模糊了什么是不是触摸设备之间的界限。 iPad专业版是触摸式的,具有13“笔记本电脑的分辨率,Windows笔记本电脑现在经常搭配触摸屏。

其他类似的SO答案(请参阅此问题的其他答案)可能会有不同的方法来尝试确定用户使用的是什么类型的设备,但是它们都不是傻瓜的。如果您绝对需要尝试确定设备,我建议您检查这些答案。

iPhone手机忽略手持式查询(Source)。如果其他智能手机也出现类似的原因,我也不会感到惊讶。

目前我用来检测移动设备的最佳方式是知道其宽度,并使用corresponding media query来捕捉移动设备。那个链接列出了一些流行的。我可以肯定,快速的谷歌搜索会让你任何其他你可能需要的。

对于更多的iPhone特定的(如Retina显示),请查看我发布的第一个链接

猜你在找的CSS相关文章