html - 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

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

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

所以:

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

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