如何通过JavaScript / CSS检测智能手机？

Question

我在网上看到，制作响应式设计的最佳方法是使用CSS @media查询。这似乎不是一个实用的解决方案，因为许多手机识别为screen并且具有与桌面显示器一样多的像素（即iPhone 6 Plus是1080x1920，而一些Android手机的尺寸更大）。因此，如果我说min-width: 800px;用于我的桌面设计，许多智能手机都会使用这些规则。

一种解决方法是在JavaScript中使用navigator.userAgent来检测移动设备，但我也听说过它并没有广泛兼容。

是否有“最佳”方式来确定用户是否在移动设备上（最好使用JavaScript或CSS）？

Answer 1

如果您将此代码添加到您的页面head，则视口的宽度将不是实际的像素数，而是可以与像素密度96dpi进行比较：

<meta name="viewport" content="width=device-width"/>

这导致大多数智能手机的CSS宽度为320像素，即使它们的实际分辨率更高。