Lighthouse 审核称，尽管主体宽度为 100%，但视口的内容大小不正确

Posted 2023-03-08

【中文标题】Lighthouse 审核称，尽管主体宽度为 100%，但视口的内容大小不正确

【英文标题】：Lighthouse audit says content not sized correctly for viewport, despite body width being 100%

【发布时间】：2018-04-28 16:40:22

【问题描述】：

我已将我的 html 页面的正文 css 设置为 100% 并且没有边距或填充，但它仍然没有通过以下 Google Lighthouse 审核“视口的内容大小正确”。

如果 window.innerWidth === window.outerWidth 则审核通过

它说视口大小是 422px，而窗口大小是 412px，所以这意味着窗口比想要的宽 10px。

当我检查 body 元素时，它显示为 412px 宽。

我想通过这次审核，有什么想法会导致这个吗？

【问题讨论】：

在运行灯塔后我遇到了同样的错误（精确的像素尺寸）。你设法解决了这个问题吗？

我不知道一个通​​用的解决方案，但这里是我的建议： 1. 确保正文的内容不超过正文的宽度（包括边距、边框等）。也尝试弄乱 body 和子元素的位置 css 属性。还要考虑溢出属性。 2. 如果你不能用#1 解决它，一个可能的残酷修复是添加一个小脚本强制innerWidth 等于outerWidth，***.com/questions/10385768/… 尽管这不是一个好的解决方案，即使它有效。祝你好运。

在我的情况下，问题是在不是主要的监视器中进行测试。在我将被测 Chrome 窗口移动到主显示器后，错误消失了。

【参考方案1】：

我正在使用 Bootstrap 3 并且也收到了此消息。过了一会儿，我发现这是因为没有包含引导样式表。我将 .net MVC 与 Razor 一起使用，并且必须在我的 layout.cshtml 中添加以下行：

@Styles.Render("~/Content/css")

BundleConfig.cs：

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css"));

【参考方案2】：

此设置受某些浏览器中的 chrome 影响。值得注意的是，Vivaldi 左侧的“面板”（默认情况下）改变了 Lighthouse 用来比较 window.innerWidth === window.outerWidth 的测量值。您需要将其关闭才能使其正常工作。

要在 Vivaldi 中关闭此功能，请单击左上角的 Vivaldi 主菜单，选择“查看”，然后选择“显示面板”进行切换。或者，点击F4 键。

重新运行您的 Lighthouse 审核，展开“通过审核”，您应该会看到“内容大小适合视口”。

【参考方案3】：

如果您有“孤儿”row Lighthouse 会触发该错误。您需要检查您在哪里使用 row 并将其包装在一个类 container-fluid 中，如下所示：

<div class="container-fluid">
  <div class="row"></div>
</div>

【参考方案4】：

将此添加到您的 CSS：

htmloverflow-x: hidden;

【参考方案5】：

在运行审计测试之前，将浏览器的缩放设置为 100%。在 100% 缩放时，我通过了审核。对于小于或大于 100% 的缩放，我收到“视口的内容大小不正确”消息 - 用于桌面审核。移动审计一直没问题。

【参考方案6】：

当您显示 DevTools 面板时，它通常出现在主应用程序页面旁边，这与视口大小相混淆。我通过以下方式解决了问题：

最大化浏览器窗口 将 DevTools 面板停靠在页面下方

【讨论】：

这个问题很愚蠢，但这对我来说是正确的答案......从底部的 Chrome 对接 DevTool 解决了这个问题。

完全正确！我使用 flex 所以它不应该是一个问题，它不是。谢谢

【参考方案7】：

我在将自己的类添加到只添加了一些顶部填充的容器 div 时遇到了这个错误：

<div class="container content">
   <div class="row">
      <div class="col-md-6">
      </div>
   </div>
</div>

将我的自定义类移到外面会使审核消息消失。

<div class="content">
   <div class="container">
      <div class="row">
         <div class="col-md-6">
         </div>
      </div>
   </div>
</div>

【参考方案8】：

我在使用 Nuxt Js（使用 Bootstrap）项目时遇到了这个错误。

这是由于 div 标签没有正确关闭。通常，当 div 层次结构未正确维护时，您会遇到此错误，即使您已正确声明视口元标记。

例如：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">

    </div>
  </div>
</div>

现在，如果您声明类“row”而不定义“container”或“container-fluid”，则网站内容不会以适合移动设备上内容所需的适当边距和填充来呈现；这就是 Google Lighthouse 审核失败的原因。

如果这能解决您的问题，请告诉我。

【讨论】：

这仅取决于您在行中拥有什么 css，并且您使用的是引导 css。