html - 分辨率相同但结果不同的桌面屏幕和移动屏幕

Question

我试图理解为什么如果我有一个宽度为 1920 像素的 Webseite 而我有一个分辨率为 1920 像素的智能手机，它会显示不同？

我找到了答案(URL)，但这让我更加困惑。

我的例子:

我有一个宽度为 100% 的 div header ，该 header 包含 10 张图像，在桌面上查看时一切正常(桌面宽度 1920px)现在我要换到我的智能手机，它的分辨率也为 1920px 和一些的不在行了。那为什么不可能呢？

DPI 的答案让我感到困惑，因为:

我有 2 个屏幕，它们都具有相同的分辨率。我的 Android 设备的 Pixel 比我的桌面设备大，那么它们的分辨率怎么可能相同呢？

如果有人能向我解释这一点或推荐一篇解释这一点的文章，我将不胜感激!

马库斯

Answer 1

他的意思是:

分辨率相同，但每个像素的物理尺寸不同。

假设您的屏幕长100 厘米，您的智能手机长10 厘米。
如果您的屏幕有 1920 像素，则每个屏幕都是 100/1920= 0.052cm 长。
如果您的智能手机也有 19202px，则每个都是 10/1920 = 0.0052cm 长

我只考虑了一个维度以使其更容易。如您所见，像素的物理尺寸不同，结果也不同。

现在您可能会问自己“好的，但我该如何解决这个问题？”

好吧，与其说“让这个元素10px 长”
你可以说
“让它1cm长”

我们已经看到像素大小可以从一个设备到另一个设备发生变化，但物理单位不会。
因此，10 像素可能更长或更短，但1cm 始终是 1cm。

希望我能澄清你的疑惑! :)