为什么 Chrome 移动调试模式设置的 HTML 正文宽度比设备宽度大得多

Question

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

带有正文宽度的屏幕截图

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

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%;
 }
}