javascript - CSS - 像素密度独立设计，CSS 像素在桌面上大 50%

Question

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

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

是真的吗？也许对于大多数移动设备来说这是真的，我在 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 无法正常工作。

更新1: 我在 MDN 上找到了这个

The default ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

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

更新2:

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

让我再次说明我的具体问题。我得到了一个跨平台的网络应用程序，它应该可以在桌面、手机和平板电脑上运行。由于像素密度不同，应用程序的每个元素在 96dpi 笔记本电脑屏幕上比在移动设备 (144dpi) 上显示大约 50%。我真正感兴趣的一件事是，为什么即使此设备的 window.devicePixelRatio=1.5，浏览器仍将其视为 1.0(否则它看起来与桌面上的一样)。

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

所以我找到了一个可能的解决方法，但我想了解更多关于 CSS 像素不一致的信息。是仅针对移动设备还是桌面设备，还是存在更多问题？在我看来它在移动设备上或多或少是一样的，但我无法测试它。我想就该主题、其他可能的解决方法、最佳实践和一些资源进行一些讨论。我已经搜索过，但在网上找不到任何东西。每个人都说，“CSS 像素是我们的密度独立像素”，但这是事实:

Answer 1

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

问题是，计算机甚至可能不知道屏幕的尺寸，或者相同的图像可能会镜像到两个不同的屏幕上 - 例如您的笔记本电脑显示器和投影仪 - 尺寸明显不同。最重要的是，大多数计算机和一些手机都允许屏幕元素缩放，这也会影响您网站上元素的大小。此外，无论如何，您不希望手机和巨大的投影仪或 50 英寸电视上的图标都是 2 厘米 x 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和 padding使它们根据 vendor 设置的字体大小进行缩放。这是有效的，因为不同的设备将具有不同的根元素默认字体大小(通常较大的字体用于较大的像素密度以提供大致一致的字体大小)。因此，使用 em和 rem将相应地缩放——当然，除非你在你的 CSS 中用绝对值覆盖它。虽然 rem (root font size ) 在某些情况下更方便，注意 only the newest Internet Explorer supports it .

自然是视口(viewport)单位 vw , vh , vmin and vmax 在创建缩放内容时会有很大帮助。但是，这些不会帮助您创建内容。

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