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

【问题标题】：why the chrome mobile debug mode set a much larger width of the html body rather than the device width?为什么 chrome 移动调试模式设置了更大的 html 正文宽度而不是设备宽度？
【发布时间】：2019-09-17 16:09:08
【问题描述】：

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

screenshot with body width

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

【问题讨论】：

标签： html css mobile google-chrome-devtools debug-mode

【解决方案1】：

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

@media (max-width: 480px) {

 body img{
   max-width: 100%;
 }

}

【讨论】：

Chrome 显示的设备尺寸正确。但是如果你看右下角，body 的实际大小是 964 px 宽度。

【解决方案2】：

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

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

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

【讨论】：

在此处提供这些详细信息会更有帮助，尤其是在链接断开的情况下...