尽管体宽为100%,灯塔审核表明内容的视口大小不正确

Question

我已将我的html页面的body css设置为100%并且没有边距或填充,但它仍然没有通过以下Google Lighthouse审核"内容大小正确用于Viewport".

如果window.innerWidth === window.outerWidth,则审计通过

它表示视口大小为422px,而窗口大小为412px,因此这意味着窗口比想要的宽10px.

当我检查身体元素时,它显示为412px宽.

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

Answer 1

当您显示DevTools面板时,它通常会出现在主应用程序页面旁边,该页面会混淆视口大小.我解决了这个问题:

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

Answer 2

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

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

Answer 3

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

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