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

How to detect a smartphone through JavaScript/CSS?

本文关键字：检测 智能手机 CSS 何通过 JavaScript      更新时间：2023-09-26

我在网络上看到，做出响应式设计的最佳方式是使用CSS @media查询。这似乎不是一个实用的解决方案，因为许多手机识别为screen，并且具有与桌面显示器一样多的像素(例如iPhone 6 Plus是1080x1920，一些Android手机甚至更大)。所以如果我说我的桌面设计是min-width: 800px;，那么许多智能手机都会使用这些规则。

一个解决方法是在JavaScript中使用navigator.userAgent来检测移动设备，但我也听说这不是广泛兼容的。

是否有"最好"的方法来确定用户是否在移动设备上(最好使用JavaScript或CSS)?

如果将此代码添加到页面head中，则视口的宽度将不是实际的像素数，而是与96dpi的像素密度相当的东西:

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

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

相关文章：