设备分辨率和固定宽度（以像素为单位）

Question

想象具有分辨率的设备 a) 300 像素 x 400 像素 b) 600 像素 X 800 像素 c) 900 像素 x 1000 像素

现在如果创建一个 div 宽度为 150px 的网页。不考虑所有其他因素（包括浏览器）

它应该占据第一个设备宽度的一半。 第二个设备中宽度的 1/3。 第三个设备宽度的 1/4。

但是，div 的绝对大小取决于屏幕大小。

这是我的假设。这在少数设备中保持良好，而在其他设备中则中断。我还缺少什么其他维度？

Answer 1

这取决于屏幕分辨率。

考虑一个旧 iphone 和一个带有视网膜显示屏的 iphone。 旧 iphone 的屏幕为 320 x 480 像素。 配备 Retina 显示屏的 iPhone 具有 640 x 960 像素的屏幕。

但是，两个屏幕的物理尺寸相同（3.5 英寸），300 像素宽的正方形以相同的物理尺寸呈现。

两台设备的逻辑屏幕尺寸均为 320 x 480 点：

• 在旧 iPhone 上，每个点都是 1 x 1 像素。
• 在配备 Retina 显示屏的 iPhone 上，每个点都是 2 x 2 像素。

当你设置width: 150px时，实际上是150分。
具有视网膜显示屏的 iphone 应用了 2 的缩放系数。
正方形实际上被渲染为 300 像素宽以匹配非视网膜的物理尺寸。

尺寸表见本站：screensiz.es

• Width 为您提供实际的像素宽度。
• 设备为您提供逻辑宽度。
• 像素密度为您提供缩放系数。

以 Galaxy SIII 为例：

像素密度为 200%（缩放系数为 2），宽度为 720，但设备宽度实际上为 360（设备宽度除以缩放系数 => 720 / 2）。