Question

我已将html页面的正文css设置为100％并且没有边距或填充，但它仍未通过以下Google Lighthouse审核＆＃34;内容大小正确用于Viewport＆＃34;。

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

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

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

我想通过这次审核，是什么导致了这个？

Answer 1

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

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

Answer 2

如果你有一个＆＃34; 孤儿＆＃34; row灯塔发射了这个错误。您需要检查您使用row的位置并将其包装在类container-fluid中，如下所示：

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

Answer 3

将此添加到您的CSS：

html{overflow-x: hidden;}

Answer 4

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

这是因为div标签未正确关闭。通常，在未正确维护div层次结构时遇到此错误，即使您已正确声明了视口元标记。

例如：

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

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

现在，如果你宣布课程＆＃34; row＆＃34;没有定义＆＃34;容器＆＃34;或＆＃34;容器流体＆＃34;，网站内容没有适当的边距和＆amp;填充需要适合移动设备上的内容;这就是为什么这次审核在Google Lighthouse上失败的原因。

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

Answer 5

当我将自己的类添加到仅添加了一些顶部填充的容器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>

Answer 6

在运行审核测试之前，将浏览器的缩放比例设置为100％。在100％缩放时，我通过了审核。对于较小或大于100％的缩放比例，我收到“内容未正确设置为视口的大小”消息-用于桌面审核。移动审核始终可以。

Answer 7

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

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

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

Answer 8

我正在使用Bootstrap 3，也收到了此消息。一段时间后，我发现这是因为不包含引导样式表。我在Razor中使用.net MVC，不得不在我的layout.cshtml中添加以下行：

var head = '<html><head>' 
      + $("head").html() 
      + ' <style>body{background-color:white !important;}@page { size: 84.1cm 59.4cm;margin: 1cm 1cm 1cm 1cm; }</style></head>';

//Additional code here......

BundleConfig.cs：

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

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

8 个答案: