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

Mozilla Firefox开发人员工具向您显示实际显示的图片大小，其中Google Chrome开发人员工具显示的是实际图片大小。

所以我们可以说谷歌Chrome和Mozilla Firefox都不对，他们只是展示了不同的图像尺寸，因为他们的设计师选择这样做。

Answer 2

一般情况下，移动浏览器使用以下策略来显示未经移动优化的网站：它们将它们渲染为好像显示在小型桌面上（即在＆＃34;虚拟视口＆＃34;，通常800到1000像素宽），然后缩小结果以适应移动屏幕。有一篇经典文章＆＃34;一个有两个视口的故事＆＃34; （特别是，part two）Peter Paul Koch解释得很好。

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

所以：

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

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

来防止

Answer 3

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

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

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

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