以厘米为单位的 CSS 媒体查询可能吗？ - 或 - 如何轻松地为任何智能手机创建特定的 CSS？

Question

这不是一个重复的问题，因为我不想专门针对 iPhone 6，我想针对所有智能手机和迷你平板电脑，包括 em> iPhone 6、7、8 等和 Android 等

---

我正在尝试找出一个有用的 CSS 媒体查询来检测智能手机。所以，我在想，以下内容非常适合，因为 iPhone 6 上以像素为单位的屏幕分辨率几乎与像素比为 1 的台式机屏幕相同:

@media (max-device-width:16cm){ /* I need the PHYSICAL device width */
  ...
}

但是，我不确定这是否总是在内部转换为 529.2 像素(1 厘米 == 37.8 像素)，或者它是否真的符合硬件的实际设备宽度(以厘米为单位)？

---

因为，在我看来，真正重要的是可用的物理空间，我根本不关心有多少像素来表示这个区域，以便决定如何我想展示的内容很多。

Answer 1

您不能使用厘米，因为某些设备的像素相距较远。

不过，您可以检查设备的像素密度。以下是如何使用具有像素密度的媒体查询。

@media all and (min-resolution: 150dpi) 
{
   body 
   {
      // do something
   }
}

第二种方法将涉及一些 JavaScript，如 here 所述.