Chrome 开发者工具中的图片尺寸

Question

我正在处理Mozilla's tutorial on responsive images。本教程的一部分解释了如何使用浏览器开发工具的响应式设计功能来查看嵌入图像在各种显示尺寸上的像素尺寸。

它要求学生在浏览器中查看their demo page，并打开响应式设计开发工具。我正在使用 Chrome 并做到了这一点。然后我将屏幕尺寸设置为320 X 480，并检查了页面正文中的第一张图片。但是，Chrome 表示图片的尺寸为800 X 464。如果屏幕本身只有320 X 480，那怎么会呢？

另外我在 Firefox 中试了一下，Firefox 给出了280 X 162.4。

所以：

1. 所有这些维度的单位是什么？我假设所有尺寸都以像素为单位，但小数像素并没有什么意义。
2. 假设单位都是一样的，为什么Chrome中的图片比屏幕大，为什么Chrome和Firefox不同意？

Answer 1

下载的图像可能比屏幕上显示的要大。如果下载的图像对于视图空间来说太大，它会缩小图像以适应。

在 Chrome 90 中，当在开发工具元素检查器中将鼠标悬停在图像 URL 上时，工具提示将显示 渲染大小 和 固有大小。内在大小是下载的大小。

在 Firefox 中，将鼠标悬停在其 Inspector 中的图像 URL 上，将在图像的弹出缩略图下显示实际图像大小（下载大小），并在页面视图中在图像上方显示渲染大小。

在真实的移动设备上，渲染大小实际上可能比这些浏览器移动视图所显示的要大。在撰写本文时，移动屏幕尺寸通常为 1080 x 1920 像素甚至更密集（Google Pixel 5 具有 FHD+ 屏幕 (1080 x 2340)）。浏览器移动视图可能会指示视图大小约为 320 x 480（取决于选择的设备）。

Answer 2

通常，移动浏览器使用以下策略来显示未针对移动设备优化的网站：它们将它们呈现为好像显示在小型桌面上（即在“虚拟视口”上，通常为 800 到 1000 像素宽)，然后按比例缩小结果以适合移动屏幕。有一篇 Peter Paul Koch 的经典文章“两个视口的故事”（特别是 part two）很好地解释了这一点。

Chrome 的开发工具的响应设计模式似乎假设这种行为正在发生并且“虚拟视口”为 980 像素宽。 Firefox 不这样做，使虚拟视口等于实际窗口大小。设置<meta name="viewport" contents="device-width"> 使所有浏览器（包括真正的移动浏览器）都执行后者。

所以：

1. 单位是缩放前的 CSS 像素。非整数像素对计算有意义，当浏览器渲染它们时，它们会被四舍五入。

2. 图片比屏幕大，因为虚拟视口被缩小了。这可以通过设置<meta name="viewport" contents="device-width"> 来防止。

Answer 3

Mozilla Firefox 开发者工具会向您显示实际显示的图像大小，而 Google Chrome 开发者工具会显示实际图像大小。

所以我们可以说 Google Chrome 和 Mozilla Firefox 都没有错，它们只是显示不同的图像大小，因为它们的设计者选择了这样做。