为什么 chrome 移动调试模式将 html body 的宽度设置得比设备宽度大得多？

Question

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

屏幕截图与身体宽度

如屏幕截图所示，模拟器假设宽度为 375 px。但不知何故变成了 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截图中的 ，效果会更好。所以不太确定你需要什么。看来问题出在图像上。如果图像的宽度是 440px，请在 CSS 中尝试此操作。

@media (max-width: 480px) {

 body img{
   max-width: 100%;
 }

}