CSS - 像素密度独立设计，桌面端CSS像素比移动端大50%

Question

CSS - 像素密度独立设计，桌面端CSS像素比移动端大50%

javascripthtmlcssmobileresponsive-design

17

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

根据最高得分的答案，“50px在所有移动设备上看起来差不多，可能会有一点变化，但CSS像素是我们构建一致文档和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 上发现了这个

默认比率取决于显示密度。在分辨率小于200dpi的显示器上，比率为1.0。在分辨率为200到300dpi之间的显示器上，比率为1.5。对于分辨率超过300dpi的显示器，比率是整数floor（density/150dpi）。注意，默认比率仅在视口缩放等于1时有效。否则，CSS像素与设备像素之间的关系取决于当前缩放级别。

我不知道它是否仍适用于所有设备，但在我的例子中似乎是这样。这非常糟糕。 50％的差异是巨大的。我无法相信Web没有更好的解决方案。而且奇怪的是，webkit-min-device-pixel-ratio显示为1.5，但实际上是1.0

更新2：

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

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

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

因此，我有一个可能的解决方法，但我想更多了解CSS像素不一致的情况。它只是移动设备与桌面之间的问题吗？还是还有更多问题？在移动设备上，它似乎对我来说差不多，但我无法进行测试。我想要一些关于这个主题的讨论，其他可能的解决方法，最佳实践和一些资源。我已经搜索过了，但找不到任何东西。每个人都只是说“CSS像素是我们密度独立像素”，但这是真相:

- Maciej Krawczyk

因为我们无法知道输出的实际物理大小，所以密度的讨论是没有意义的。让用户缩放并不要太担心数学问题，而要关注“它看起来有多好”。 - dandavis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Okku · Accepted Answer

这种大小差异是有设计意图的。移动设备通常离眼睛更近，由于屏幕尺寸较小，需要将更多内容塞入较小的空间中。

问题是，计算机甚至可能不知道屏幕的大小，或者同一图像可能被镜像到两个不同的屏幕上，比如你的笔记本电脑显示器和一个投影仪，在这些屏幕上的大小显然是不同的。此外，大多数计算机和一些手机允许屏幕元素缩放，这也会影响你网站上元素的大小。此外，你也不希望在手机和大型投影仪或50英寸的电视上看到相同大小的图标。

但即使出于某种原因，你想要强制在所有设备上以完全相同的实际尺寸呈现内容，不幸的是，没有办法。单位如毫米、厘米、英寸、磅和排版点将产生极其不一致的结果，不应该用于面向屏幕的内容。

针对响应式网站，如果您使用像素单位，请使用元标记，这将确保网站正确缩放。然而，这并不意味着CSS像素在所有设备上的大小都完全相同，并且它也没有这个意图。浏览器只会考虑设备大小和设备分辨率来选择CSS像素大小，并不会尝试将其重新缩放以适合移动电话上的桌面站点。这是我个人喜欢的方法，我发现我的跨平台Web应用程序在各种设备上都能按预期缩放。

另一种使用前面提到的标签的选项是使用em或rem，使页面上的元素与设备字体大小成比例缩放。虽然em和rem分别指当前元素和根元素字体大小，但这些单位也可以用于其他规则，如宽度和填充，以使它们相对于供应商设置的字体大小进行缩放。这是有效的，因为不同的设备会为根元素设置不同的默认字体大小（通常是更大的像素密度提供大致一致的字体大小）。因此，使用em和rem将相应地进行缩放 - 当然，除非您在CSS中使用绝对值覆盖它。尽管rem（根字体大小）在某些情况下更方便，但请注意只有最新的Internet Explorer支持它。

自然情况下，视口单位vw, vh, vmin和vmax在创建可缩放内容时非常有用。但是，它们不能帮助您创建内容。

总之，如果我是您，我不会过于关注如何在所有监视器上使元素完全相同的大小；这是徒劳的追求。不仅您无法成功，而且即使您成功了，您的网站的可用性也会受到影响。