CSS - 像素密度独立设计，桌面

Question

我已经在网上做了很多研究，我仍然不确定如何在我的网络应用中处理不同的屏幕密度。我在此网站上找到的唯一有用的问题和答案是：Getting the physical screen dimensions / dpi / pixel density in Chrome on Android

根据评分最高的答案，＆＃34; 50px应该在所有移动设备上看起来大致相同，它可能会有所不同，但CSS Pixel是我们独立于设备的方式来构建一致的文档和UI＆＃s;＆＃ 34;

真的吗？也许对于大多数移动设备来说，它是真的，我在2部手机上测试了我的应用程序，其中一部分是144ppi，另外一部分是288ppi，它看起来有点相同。但是在桌面上，它要大得多。桌面上的CSS像素大约增加50％。这是一个问题，因为即使您对大屏幕和小屏幕进行单独设计，也有很多移动设备应该被视为大屏幕，例如横向模式的平板电脑。所以，让我们假设您为桌面设计了一些东西，但只是感到失望的是它在平板电脑上看起来要小50％。

在我看来，设备像素比率似乎不对。我用这个网站来测试我的屏幕：https://bjango.com/articles/min-device-pixel-ratio/ 笔记本电脑屏幕为96dpi，-webkit-min-device-pixel-ratio = 1.0 智能手机为144dpi，设备像素比为1.5

所以理论上，根据这个信息，元素应该在移动设备上显示相同。 144 / 1.5 = 96但它没有。就像DPR工作不正常一样。

UPDATE1 ： 我在MDN

上找到了这个

  

默认比率取决于显示密度。在显示器上   密度小于200dpi，比例为1.0。在密度显示   在200和300dpi之间，比率为1.5。用于密度显示   超过300dpi，比率是整数层（密度/ 150dpi）。注意   仅当视口比例等于1时，默认比率才为真。   否则，CSS像素和设备像素之间的关系   取决于当前的缩放级别。

我不知道它是否仍然适用于所有设备，但在我的示例中似乎是这样。这真是太糟了。 50％的差异是巨大的。我无法相信网络没有更好的提供。 webkit-min-device-pixel-ratio显示1.5也很奇怪，但实际上它是1.0

UPDATE2 ：

好的，所以我开始赏金。我只想要一些答案，最佳实践，CSS像素不成比例的其他可能情况，一些链接。任何可以帮助我在这种情况下的东西。

让我再说一次我的具体问题。我有一个跨平台的网络应用程序，应该在桌面，手机和平板电脑上运行。由于像素密度不同，96dpi笔记本电脑屏幕上应用的每个元素都比移动设备（144 dpi）大约高50％。我真正感兴趣的一件事是，为什么即使这个设备的window.devicePixelRatio = 1.5，浏览器也会将它视为1.0（否则它看起来与桌面上的相同）。

我使用一种桌面和平板电脑设计，分辨率并不重要。我的网络应用程序是独立的，因此桌面用户可以将窗口宽度设置为800px。但与平板电脑相比，台式机上的东西太大了。我将不得不在平板电脑和台式机上为元素设置不同的大小。我想到的一件事是使用媒体查询（min-device-pixel-ratio：1.5）将为移动设备设置样式。

所以我得到了一个可能的解决方法，但我想了解更多关于CSS像素不一致的信息。是仅仅针对移动设备还是桌面设备还是存在更多问题？在我看来，它在移动设备上或多或少相同，但我无法对其进行测试。我想讨论一下这个主题，其他可能的解决方法，最佳实践，一些资源。我已经搜索过了，我无法在网上找到任何内容。每个人都说，＆＃34; CSS像素是我们的密度无关像素＆＃34;，但这是事实：

Answer 1

尺寸差异是设计的。移动设备通常被视为距离眼睛较近，并且由于屏幕尺寸较小，因此需要将更多移动设备塞入更小的空间。

问题是，计算机可能甚至不知道屏幕的大小，或者相同的图像可能会镜像到两个不同的屏幕上 - 如笔记本电脑显示器和投影仪 - 其大小明显不同。最重要的是，大多数计算机和一些手机都允许屏幕元素缩放，这也会影响网站上元素的大小。此外，你不会想要一个手机和一个巨大的投影仪或50＆＃34;上的图标为2厘米×2厘米;无论如何，电视。

但是，即使您出于某种原因想要，但遗憾的是，无法强制您的内容在所有设备上使用完全相同的真实世界维度进行渲染。 mm，cm，in，pt和pc等单位会产生非常不一致的结果shouldn't be used for content intended for screens。

对于自适应网站，如果您要使用<meta name="viewport" content="width=device-width, initial-scale=1"/>单元，则应使用px元标记。这将确保the website scales properly。然而，这并没有使CSS像素在所有设备上完全相同，并且它也不打算这样做。在选择CSS像素大小时，浏览器将仅考虑设备大小和设备分辨率，并且不会尝试将其重新缩放以适合移动电话上的桌面站点。这是我个人喜欢的方法，我发现我的跨平台网络应用程序可以跨设备进行扩展。

使用前面提到的meta tag的另一个选择是使用em or rem使页面上的元素与设备font size成比例。虽然em和rem分别引用了当前element和root element font-sizes，但这些单位可用于其他规则，例如width和{ {1}}使它们相对于供应商设置的字体大小进行缩放。这是有效的，因为不同的设备将具有不同的默认字体大小的根元素（通常较大的字体，较大的像素密度，以提供大致一致的字体大小）。因此，使用padding和em会相应缩放 - 当然，除非您在CSS中使用绝对值覆盖它。虽然rem（rem root）在某些情况下更方便，但请注意only the newest Internet Explorer supports it。

自然地，视口单元vw, vh, vmin and vmax在创建缩放内容时可以提供很大帮助。但是，这些不会帮助您创建内容。

总之，如果我是你，我不会那么担心在所有显示器上制作完全相同大小的元素;这是徒劳的追求。您不仅不会成功，而且即使您这样做，您网站的可用性也会受到影响。