Chrome开发者工具中图片尺寸异常及浏览器差异咨询

1. 尺寸单位是什么？分数像素合理吗？ #

你看到的尺寸单位是CSS像素（逻辑像素），并非设备的物理像素。浏览器在布局渲染时会用到亚像素计算技术——比如当图片需要按固定宽高比适配非整数倍的视口、或者页面设置了非100%的缩放比例时，就会出现分数像素。这是浏览器为了让视觉过渡更平滑自然的正常操作，完全符合现代网页渲染逻辑，不用觉得不合理。

2. 为什么Chrome和Firefox的结果差异这么大？ #

这个差异主要源于两个浏览器响应式工具的默认行为，以及对未做响应式优化图片的处理策略不同：

• Chrome的情况：你测试的是未做响应式处理的页面（图片没有添加max-width: 100%这类限制规则），Chrome的响应式设计工具默认不会自动缩放页面内容来适配视口。所以图片会直接以原始尺寸（800x464 CSS像素）显示，自然会超出你设置的320x480视口。你可以尝试开启Chrome响应式工具顶部的「缩放以适应」按钮，开启后图片就会被缩放到适配视口的大小。
• Firefox的情况：Firefox的响应式工具默认会自动缩放页面内容，让整体适配你设置的视口尺寸。同时，页面<body>标签默认带有左右margin（通常各8px），所以图片的可用宽度是320px减去16px的margin，再结合图片固定宽高比计算，最终得到280x162.4的尺寸，这完全符合Firefox的布局计算逻辑。

另外，Chrome的Blink引擎和Firefox的Gecko引擎在亚像素渲染、边界计算的细节上略有差异，这也是数值不完全匹配的次要原因，但核心还是工具默认行为的区别。

内容的提问来源于stack exchange，提问作者canyonCreek