不同设备的媒体查询

Posted 2023-03-06

【中文标题】不同设备的媒体查询

【英文标题】：Media queries for different devices

【发布时间】：2021-05-02 18:32:54

【问题描述】：

我已经研究了一段时间了，但仍有一些我无法理解。

许多网站（1、2）建议我们在为智能手机开发时使用一些常见的断点来进行媒体查询。

尽管debate between pixels, ems or rems（我通常使用ems），但问题是现在智能手机的分辨率越来越高，高达1080p甚至1440p。

在我看来，这使得使用媒体查询区分不同类型的设备毫无意义，因为现代智能手机与许多旧桌面具有相同的像素宽度。

使用@media (max-width: 600px)（或37.5）编写媒体查询不再有意义，因为（我使用智能手机对其进行了测试）它不会被触发。

我不能只增加断点级别，因为一些较旧的台式机或平板电脑的分辨率低于现代智能手机。此外，我会有一个从 0 到 1080px 的巨大断点（这仍然不够）。

我知道@media (hover: ...)，但我没有看到有人建议将它用于断点，而且我在任何地方都找不到它来窥视一些大型网站的 CSS

我错过了什么吗？

现代网站如何区分智能手机和台式机？

---

如果我在问一些愚蠢的问题，请不要攻击我...我知道我可能会错过一些简单的东西，但我不能只是得到它。任何答案将不胜感激。

提前致谢。

【问题讨论】：

您对智能手机分辨率的看法是错误的。硬件像素和css像素是有区别的。没有纵向模式下的智能手机宽度超过 480 像素。 CSS 无法解决智能手机的所有硬件像素。每个 css 像素转换为 2-8 个硬件像素。

@tacoshy 非常感谢！但是 2-8 依赖于什么？是随机的还是有任何公式可以通过实际像素数和dpi计算CSS像素数？

因制造商而异，也因设备而异。这是一个较旧的列表，显示了正确的 css 像素数量：mediag.com/blog/popular-screen-resolutions-designing-for-all

@tacoshy 非常感谢你

【参考方案1】：

即使移动屏幕可能具有高分辨率，但这并不重要 - 因为像素密度在这里很重要。

只要您set your viewport to support mobile devices，媒体查询就会按您的预期工作（使用较小的数字，例如600px）。

你可以阅读更多关于the meaning of CSS pixels on MDN的信息。

【讨论】：

非常感谢！我低估了meta viewport 的用处。无论如何，是否有任何公式或类似的东西可以让我从实际像素数和 dpi 计算 CSS 像素数？