11

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

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

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

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

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

4

8 回答 8

25

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

  • 最大化浏览器窗口
  • 将 DevTools 面板停靠在页面下方
于 2018-07-17T00:22:21.013 回答
4

如果您有一个“孤儿”row灯塔会触发该错误。您需要检查您在哪里使用它row并将其包装在这样的类中container-fluid：

<div class="container-fluid">
  <div class="row"></div>
</div>
于 2018-03-14T19:36:01.650 回答
3

将此添加到您的CSS：

html{overflow-x: hidden;}
于 2018-08-25T16:14:11.163 回答
1

在将我自己的类添加到只添加了一些顶部填充的容器 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>
于 2018-03-23T17:30:44.610 回答
0

我正在使用 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"));
于 2019-11-20T16:03:15.320 回答
0

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

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

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

于 2018-10-30T15:49:16.407 回答
0

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

于 2018-08-03T18:29:00.350 回答
0

我在使用 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 审核失败的原因。

让我知道，如果这解决了您的问题。

于 2017-12-11T09:56:46.897 回答