设备分辨率和固定宽度（像素）

Question

想象一下具有分辨率的设备 a）300px x 400px b）600px X 800px c）900px x 1000px

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

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

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

这是我的假设。这在少数设备中保持良好，在其他设备中保持不变我错过了什么其他方面？

Answer 1

这取决于屏幕分辨率。

考虑使用旧的iphone和带视网膜的iphone。 旧款iphone的屏幕为320 x 480像素。 带有视网膜显示屏的iphone屏幕为640 x 960像素。

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

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

• 在旧的iphone上，每个点都是1 x 1像素。
• 在带有视网膜显示屏的iphone上，每个点都是2 x 2像素。

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

请参阅此网站了解尺寸表：screensiz.es

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

检查Galaxy SIII例如：

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