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

Question

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

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

此外，我在 Firefox 中进行了尝试，Firefox 给出了280 X 162.4 。

所以：

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

Answer 1

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

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

所以：

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

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

Answer 2

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

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

Answer 3

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

在 Chrome 90 中，将鼠标悬停在 Dev Tools Elements 检查器中的图像 URL 上时，工具提示将显示Rendered size和Intrinsic size 。 内在大小是下载的大小。

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

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