使用CSS媒体查询如何区分手机和屏幕？

我了解到，大多数媒体查询都使用视口宽度来确定您是在手机、平板电脑还是PC上。我正在构建一个图像网格，在一个无休止的网格中使用1000个小拇指。每个拇指是125px，在我的笔记本电脑（MacBook 13“）上，我可以很容易地将9-10个拇指放在一排，这提供了一个很好的用户体验。如果我将相同的代码带到nexus 5上，它的直径是1080px，我会得到6-7个拇指，这是一个糟糕的用户体验。nexus的直径是6-7厘米，MacBook的直径是25厘米，差别很大

我的方法是检测设备是移动设备还是个人电脑，并测量拇指的大小——移动设备的拇指大（比如250px），个人电脑的拇指小（125px）。 但我如何检测设备。如果我使用宽度，我基本上必须使用最小宽度1100px来捕捉大多数新手机。我也可以使用分辨率，手机的DPI通常比PC/笔记本电脑更高

还是我完全错了

---

我在React中编写了这个应用程序。

这并不是因为你的Nexus 5以1080px的速度呈现网页，而是因为你的站点没有响应性地执行以适应你的手机屏幕，所以它呈现为一个缩小的桌面站点

您需要将此视口元标记添加到站点的

：

---

分辨率是比检测移动设备更好的方法——例如，平板电脑有大屏幕的移动用户代理。分辨率似乎无法区分文本正在调整大小的移动设备（显示：内联块除外）和“只有一个小桌面窗口”“。下面的答案通过强制不进行设备缩放来实现这一点。有没有一种方法可以在CSS中区分这一点（正如最初的问题所问的）？这是甜蜜而简单的-我想知道每个人是如何写宽度是一种方式的…谢谢

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">