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

Question

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

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

真的吗？也许对于大多数移动设备来说，这是真的，我在两部手机上测试了我的应用程序，一部分使用了144ppi，另一部分使用了288ppi，而且看起来还是一样。但是在桌面上，它却更大。桌面上的CSS像素大约大50％。这是一个问题，因为即使您有单独的大屏幕和小屏幕设计，也有很多移动设备应该被视为大屏幕，例如横向模式下的平板电脑。因此，假设您为桌面设计了某些东西，只是对平板电脑看起来体积缩小了50％感到失望。

在我看来，像是设备像素比例不正确。我用这个网站来测试我的屏幕：https://bjango.com/articles/min-device-pixel-ratio/ 笔记本屏幕是96DPI，-webkit敏设备象素比= 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所敏设备象素比率显示1.5，但实际上它是1.0

UPDATE2：

确定，所以我开始一个奖金。我只想要一些答案，最佳实践，CSS像素不均衡的其他可能情况，一些链接。在这种情况下任何可以帮助我的东西。

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

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

所以我有一个可能的解决方法，但我想知道更多关于CSS像素不一致性。这是仅仅针对移动还是桌面还是更多问题？在我看来，它似乎在移动设备上差不多，但我无法测试它。我想讨论一下这个话题，其他可能的解决方法，最佳实践和一些资源。我搜索了，我在网上找不到任何东西。每个人都只是说，“CSS像素是我们密度独立像素”，但这里是真理：

Answer 1

我不会太卡上的像素比，它只是与触摸的距离有关事件。使用响应式布局，px单位最适合需要偏移定位的位图和伪元素。对于设备响应式布局，使用可缩放单元如%，em,vh,vw等要好得多。

您可以使用em单位来确保一致的缩放比例，以便通过添加此代码行来缩放需要缩放的元素。

document.body.style.fontSize = (document.body.offsetWidth * .282) + '%'; 

的0.282的归一化值到可接受的量时，fontSize的将是相对于所述装置的宽度，并且将影响使用该em单元，用于上浆的所有元素。

Answer 2

尺寸差异是由设计决定的。移动设备通常更靠近眼睛，由于屏幕尺寸较小，因此需要将更多空间挤入较小的空间。

问题是，计算机可能甚至不知道屏幕的大小，或者相同的图像可能会镜像到两个不同的屏幕上 - 例如笔记本电脑显示器和投影仪 - 其尺寸明显不同。最重要的是，大多数电脑和一些手机允许屏幕元素缩放，这也会影响网站上元素的大小。此外，无论如何，在手机和巨型投影机或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 elementfont-sizes，但这些单元可以用于其他规则，如width和padding，以使它们按照供应商设置的字体大小进行缩放。这是有效的，因为不同的设备对于根元素将具有不同的默认字体大小（通常对于较大的像素密度来说较大的字体以提供大致一致的字体大小）。因此，使用em和rem将相应地进行缩放 - 除非您在CSS中用绝对值覆盖它。虽然rem（rootfont size）在某些情况下更方便，但请注意，only the newest Internet Explorer supports it。

自然，创建缩放内容时，视口单元vw, vh, vmin and vmax可以有很大的帮助。但是，这些不会帮助您创建内容。总而言之，如果我是你，我不会那么在意在所有显示器上使元素尺寸完全相同;这是徒劳的追求。你不但不会成功，但即使你做到了，你网站的可用性也会受到影响。