有没有办法检测是否使用了手持浏览器（iOS/Android 手机/平板电脑）？
我尝试这样做的目的是让手持设备上的浏览器中的元素宽度减半，但这并没有什么不同。
width: 600px;
@media handheld { width: 300px; }
可以做到吗？如果可以怎么做？
编辑：来自我使用的 jmaes 回答中的参考页面
@media only screen and (max-device-width: 480px).
【问题讨论】：
标签： css media-queries
更新（2016 年 6 月）：我现在尝试在每个分辨率上都支持触摸和鼠标输入，因为设备环境正在慢慢模糊事物是和非触摸设备之间的界限。 iPad Pro 仅支持触控，分辨率相当于 13 英寸笔记本电脑。Windows 笔记本电脑现在经常配备触摸屏。
其他类似的 SO 答案（请参阅此问题的其他答案）可能有不同的方法来尝试找出用户正在使用哪种设备，但它们都不是万无一失的。如果您绝对需要尝试确定设备，我鼓励您检查这些答案。
例如，iPhone 会忽略 handheld 查询 (Source)。如果其他智能手机也出于类似原因这样做，我也不会感到惊讶。
目前我用来检测移动设备的最佳方法是知道它的宽度并使用corresponding media query 来捕捉它。那里的链接列出了一些流行的链接。我敢肯定，快速的 Google 搜索会为您提供您可能需要的任何其他内容。
如需更多 iPhone 专用（如 Retina 显示屏），请查看我发布的第一个链接。
【讨论】：
n 为 1、2、3……）例如见mydevice.io/devices当然媒体查询使用屏幕大小来检测设备类型很麻烦，但不幸的是周围没有那么多其他选择......
device-width和device-height媒体功能
【讨论】：
不要检测移动设备，而是使用固定设备。
现在（2016 年）有一种方法可以检测每英寸/厘米/像素的点数，这似乎适用于大多数现代浏览器（请参阅 http://caniuse.com/#feat=css-media-resolution）。我需要一种方法来区分相对较小的屏幕、方向无关紧要和固定的计算机显示器。
由于很多移动浏览器不支持这一点，可以为所有情况编写通用 css 代码，并将此异常用于大屏幕：
@media (max-resolution: 1dppx) {
/* ... */
}
Windows XP 和 7 都具有每像素 1 个点（或 96dpi）的默认设置。我不了解其他操作系统，但这非常适合我的需求。
编辑：dppx 似乎在 Internet Explorer 中不起作用。请改用 (96)dpi。
【讨论】：
检测移动设备
相关回答：https://stackoverflow.com/a/13805337/1306809
没有一种方法是真正万无一失的。最好的办法是根据需要混合搭配各种技巧，以增加成功检测更广泛手持设备的机会。请参阅上面的链接了解一些不同的选项。
【讨论】：
我认为检测移动设备的一种更可靠的方法是查看 navigator.userAgent 字符串。例如，在我的 iPhone 上，用户代理字符串是：
Mozilla/5.0（iPhone；CPU iPhone OS 10_3_2，如 Mac OS X）AppleWebKit/603.2.4（KHTML，如 Gecko）版本/10.0 Mobile/14F89 Safari/602.1
请注意，此字符串包含两个说明关键字：iPhone 和 Mobile。其他我没有的设备的用户代理字符串提供于：
https://deviceatlas.com/blog/list-of-user-agent-strings
使用此字符串，我使用以下代码将我网站上的 JavaScript 布尔变量 bMobile 设置为 true 或 false：
var bMobile = // will be true if running on a mobile device
navigator.userAgent.indexOf( "Mobile" ) !== -1 ||
navigator.userAgent.indexOf( "iPhone" ) !== -1 ||
navigator.userAgent.indexOf( "Android" ) !== -1 ||
navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;
【讨论】：
许多移动设备的分辨率非常高，以至于很难将它们与更大的屏幕区分开来。有两种方法可以解决这个问题：
使用以下 HTML 代码缩放像素（将较小的像素分组为单位像素的大小 - 96dpi，因此px 单位将在所有屏幕上具有相同的物理大小）。请注意，这将影响您网站中几乎所有内容的规模，但这通常是使网站适合移动设备的方式。
<meta name="viewport" content="width=device-width, initial-scale=1">
或者，在@media 查询中使用cm 而不是px 单位测量屏幕宽度可以告诉您是否正在处理物理上较小的屏幕，而不管分辨率如何。
【讨论】：
我知道这是一个旧线程，但我认为这可能会对某人有所帮助：
移动设备的高度大于宽度，相反，计算机的宽度大于高度。例如：
@media all and (max-width: 320px) and (min-height: 320px)
所以我猜每个宽度都必须这样做。
【讨论】：
简单！把这个扔到你的 CSS 文件的底部，这部分 CSS 将在手机中被修改：-
/* ON A PHONE */
@media only screen and (max-width: 600px) { /* CSS HERE ONLY ON PHONE */ }
瞧！
【讨论】：
400px X 750px 附近。这里的downvotes似乎表明问题想要检测UA是移动浏览器还是桌面浏览器 - 有时需要修复导致视口高度变化的url栏。