Question

在CSS媒体查询中是否有使用物理屏幕宽度的解决方法？今天，有些手机超过了桌面显示器的分辨率。但是，手机仍然应该将移动布局和桌面显示为标准布局。

所以我不能依赖像下面的例子那样基于像素的查询。相反，我需要一个物理测量，或者一个关于像素密度的测量。

@media screen and (min-width: 700px) {

}

由于我没有通过我的研究找到这样的测量，它们可能不存在。无论如何，这个问题通常是如何解决的？

Answer 1

嗯，对于初学者来说，CSS像素是an angular measurement并且在设备之间进行了相当规范化。不完全，但足以使其在大多数情况下成为非问题。

就个人而言，我会在em中测量媒体查询，以便它们与我的字体大小相关。我的意思是，人们通常会访问一个网站来阅读网站上的文字，所以只要每行都有合理数量的单词，我就会满意。

你真的不应该用物理（设备）宽度进行测量，因为人们可能有UI元素占用空间（或者根本不是全屏运行他们的浏览器）。

Answer 2

今天似乎没有可靠的检查方法。

我有相同的“需要”，当像素不如观看距离和屏幕尺寸一样重要时，就会出现这种情况。

例如：您可以拥有与大型电视机具有相同分辨率的iPad，但您可能希望在这两种设备上以非常不同的方式呈现内容，因为电视可能位于相当远的地方（超过相当于一臂之力的iPad。）

对电视机有@media查询可能有所帮助，但现在对它的支持可能非常稀少。我的Google Chrome v32支持它。在这里测试你的：http://cssmediaqueries.com/

Answer 3

@media screen and (min-width: 700px)和window.innerWidth等媒体查询使用css像素。首先，当移动设备真的是320px时，css像素和真实像素是相同的。现在，800px和相同尺寸的新设备仍然报告320 css像素。

这对于设计向后兼容的网站非常有用。基本上@media screen and (max-width: 480px)可以转换为：小，考虑到眼睛到屏幕距离和屏幕尺寸（以米为单位而不是像素）。

因此，css像素作为参考测量比其他任何事情更重要。

真实像素，dpi，屏幕类型和方向可以或将可用于媒体查询。但是使用它们可能是一种反模式。

另请不要忘记viewport元标记。