我在网络上看到，进行响应式设计的最佳方式是使用 CSS @media 查询。这似乎不是一个实用的解决方案，因为许多手机识别为 screen 并且具有与桌面显示器一样多的像素(即 iPhone 6 Plus 为 1080x1920，一些 Android 手机的尺寸甚至更大)。因此，如果我对我的桌面设计说 min-width: 800px;，许多智能手机都会使用这些规则。
一种解决方法是在 JavaScript 中使用 navigator.userAgent 来检测移动设备，但我也听说这不是广泛兼容的。
是否有确定用户是否使用移动设备的“最佳”方法(最好使用 JavaScript 或 CSS)？
最佳答案
如果将此代码添加到页面 head，视口(viewport)的宽度将不是实际像素数，而是与 96dpi 像素密度相当的值:
<meta name="viewport" content="width=device-width"/>
这导致大多数智能手机的 CSS 宽度为 320 像素，尽管它们的实际分辨率更高。
关于javascript - 如何通过 JavaScript/CSS 检测智能手机？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31485510/