html - 为什么 chrome 移动调试模式设置了更大的 html 正文宽度而不是设备宽度？

Question

我在 html 正文中有一个图像元素，宽度为 440 像素，高度为 840 像素。一切都按预期工作，直到我打开 chrome 调试模式以模拟它在移动设备中的显示。

带有正文宽度的屏幕截图

如屏幕截图所示，模拟器假设宽度为 375 像素。但不知何故变成了 964 px 宽度。那里没有任何额外的 css 脚本或 js 脚本。只是一个带有一张图片的简单 html。带有图像宽度的屏幕截图

Answer 1

我们发现您需要在标题中包含以下内容：

<meta name="viewport" content="width=device-width,initial-scale=1">

此处有更多详细信息：www.sitepoint.com/media-queries-width-vs-device-width/

Answer 2

根据您的屏幕截图，chrome 显示正确的设备尺寸为 375 x 812。如果您单击img屏幕截图中的 会更好。所以不完全确定你需要什么。看来问题出在图像上。如果您的图像宽度为 440 像素，请在您的 CSS 中尝试此操作。

@media (max-width: 480px) {

 body img{
   max-width: 100%;
 }

}