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

我在网络上做了很多研究，但我仍然不知道如何处理我的网络应用程序中不同的屏幕密度。我在这个网站上找到的唯一有用的问题和答案是：

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

真的吗？也许对于大多数移动设备来说，这是真的，我在两台手机上测试了我的应用程序，一台是144ppi，另一台是288ppi，看起来差不多。但是在桌面上，它要大得多。桌面上的CSS像素大约大50%。这是一个问题，因为即使你对大屏幕和小屏幕有单独的设计，也有很多移动设备应该被视为大屏幕，比如处于横向模式的平板电脑。所以，假设你为桌面设计了一些东西，却对它在平板电脑上看起来小了50%感到失望

在我看来，设备像素比例似乎有问题。我使用此网站测试我的屏幕： 笔记本电脑屏幕为96dpi，-webkit最小设备像素比=1.0 智能手机为144dpi，设备像素比为1.5

所以理论上，根据这个信息，元素在手机上应该是一样的。144/1.5=96，但事实并非如此。好像DPR不能正常工作

更新1： 我发现这个在我的电脑上

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

我不知道它是否仍然适用于所有设备，但在我的示例中，它似乎是适用的。这很糟糕。50%的差距是巨大的。我不敢相信网络没有更好的东西可以提供。 同样奇怪的是，webkit最小设备像素比率显示为1.5，但实际上是1.0

更新2：

好吧，我开始悬赏了。我只是想要一些答案，最佳实践，CSS像素不均衡的其他可能情况，一些链接。任何能在这种情况下帮助我的东西

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

我在桌面和平板电脑上使用一种设计，分辨率其实并不重要。我的web应用程序是独立的，因此桌面用户可以将窗口宽度设置为800px。但与平板电脑相比，桌面电脑上的东西太大了。我必须为平板电脑和桌面上的元素设置不同的大小。我想到的一件事是使用媒体查询（最小设备像素比：1.5）可以设置移动设备的风格

所以我找到了一个可能的解决办法，但我想知道更多关于CSS像素不一致的情况。这是手机还是台式机的情况，还是还有更多的问题？在我看来，它在移动设备上或多或少是一样的，但我无法测试它。我想讨论一下这个话题，其他可能的解决方法，最佳实践，一些资源。我已经搜索过了，但在网上找不到任何东西。每个人都说，“CSS像素是我们的密度无关像素”，但事实是：

---

尺寸差异是由设计决定的。移动设备通常离眼睛更近，由于屏幕尺寸更小，需要在更小的空间中塞满更多的内容

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

但是，不管出于什么原因，即使你想这样做，不幸的是，也没有办法强迫你的内容在所有设备上以完全相同的真实尺寸呈现。像

mm

、

cm

、

in

、

pt

和

pc

这样的单位会产生非常不一致的结果和错误

对于响应迅速的网站，如果要使用

px

单位，则应使用

元标记。这将确保。但是，这不会使CSS像素在所有设备上的大小完全相同，也不会这样做。在选择时，浏览器只会考虑设备大小和设备分辨率我会调整CSS像素大小，不会尝试重新缩放它以适应移动电话上的桌面站点。这是我个人喜欢的方法，我发现我的跨平台web应用程序可以像预期的那样跨设备扩展

使用前面提到的

元标记的另一个选项是使用页面比例上的元素与设备
font size
相关。当
em
和
rem
分别指当前的
元素和
根元素
font size
时，可以使用这些单元d使用其他规则，如
宽度
和
填充
，使其相对于供应商设置的字体大小进行缩放。这是有效的，因为不同的设备将为根元素使用不同的默认字体大小（gener