我了解到大多数媒体查询使用视口(viewport)宽度来确定您是在手机、平板电脑还是 PC 上。我正在构建一个图像网格，在无尽的网格中包含数千个小拇指。每个拇指的长度为 125 像素，在我的笔记本电脑(MacBook 13 英寸)上，我可以轻松地将 9-10 个拇指排成一排 - 这提供了良好的用户体验。如果我将相同的代码应用于 Nexus 5(其宽度为 1080 像素)，我会得到 6 -7 个拇指，这是一个糟糕的用户体验。Nexus 的宽度为 6-7 厘米，而 MacBook 的宽度为 25 厘米左右 - 差别很大。
我的方法是检测设备是移动设备还是个人电脑，并缩放拇指 - 移动设备大(比如 250 像素)，电脑小(125 像素)。 但我如何检测该设备。如果我使用宽度，我基本上必须使用 1100px 的最小宽度来捕获大多数新手机。我还可以选择分辨率，手机通常比 PC/笔记本电脑具有更高的 DPI。
或者我完全错了？
我正在用 React 编写应用程序。
最佳答案
这并不是说您的 Nexus 5 以 1080 像素宽渲染网页，而是您的网站没有响应地执行以适合您的手机屏幕，因此它呈现为缩小的桌面网站。
您需要将此视口(viewport)元标记添加到您网站的 <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
一旦进入，您的 Nexus 5 应该以接近 400 像素宽的宽度呈现网页，您可以围绕该宽度进行媒体查询。
以下是如何将宽度小于 480 像素的屏幕的缩略图设为 125 像素宽:
@media (max-width: 480px) {
img {
width: 125px;
}
}
关于css - 如何用CSS媒体查询区分移动端和屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45742475/