web-dev-qa-db-ja.com

灯台の監査によると、ボディ幅が100％であるにもかかわらず、コンテンツのサイズがビューポートに対して正しくない

HTMLページの本文のCSSを100％に設定し、余白やパディングはありませんが、それでも次の処理に合格しません Google Lighthouse 「ビューポート用に正しくサイズ設定されたコンテンツ」を監査します。

Window.innerWidth === window.outerWidthの場合、監査は合格です

ビューポートのサイズが422pxであるのに対し、ウィンドウのサイズは412pxであると表示されているため、これはウィンドウが必要以上に10px広いことを意味します。

Body要素を調べると、幅が412pxであると表示されています。

この監査に合格したいのですが、これを引き起こしている原因について何か考えはありますか？

javascripthtmlcssviewportlighthouse
9
George

DevToolsパネルを表示すると、通常、メインアプリケーションページの横に表示され、ビューポートのサイズが乱れます。私は次の方法で問題を解決しました：

  • ブラウザウィンドウを最大化する
  • ページの下にDevToolsパネルをドッキングする
20
Landry BETE

"Orphan" row Lighthouseがある場合、そのエラーが発生します。そのrowを使用している場所を確認し、次のようにクラスcontainer-fluidでラップする必要があります。

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

コンテナ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>
1
Adam Lane

これをCSSに追加します。

html{overflow-x: hidden;}
1
goksel

Bootstrap 3を使用していて、このメッセージも表示されました。しばらくすると、これはbootstrapスタイルシートが含まれていなかったためです。I ' mRazorで.netMVCを使用し、layout.cshtmlに次の行を追加する必要がありました。

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

BundleConfig.cs：

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

監査テストを実行する前に、ブラウザのズームを100％に設定してください。 100％ズームで監査に合格しました。 100％ズームよりも小さいまたは大きい場合、デスクトップ監査用に「コンテンツのサイズがビューポートに対して正しく設定されていません」というメッセージが表示されます。モバイル監査は常に問題ありませんでした。

0
Zoltan Gregor

Nuxt Js（Bootstrapを使用）プロジェクトで作業しているときに、このエラーに遭遇しました。

Divタグが正しく閉じられなかったことが原因でした。通常、div階層が適切に維持されていない場合、このエラーが発生しますビューポートメタタグを適切に宣言している場合でも

例えば：

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

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

ここで、「container」または「container-fluid」を定義せずにクラス「row」を宣言すると、サイトコンテンツは、モバイルデバイスのコンテンツに合わせるために必要な適切なマージンとパディングでレンダリングされません。これが、この監査がGoogleLighthouseで失敗する理由です。

これで問題が解決した場合はお知らせください。

0
krutie

この設定is一部のブラウザではchromeの影響を受けます。特に、Vivaldiの左側の「パネル」（デフォルト） Lighthouseがwindow.innerWidth === window.outerWidthを比較するために使用している測定値を変更します。これを機能させるには、これをオフにする必要があります。

Vivaldiでこれをオフにするには、左上隅にあるメインのVivaldiメニューをクリックし、[表示]、[パネルの表示]の順に選択して切り替えます。または、F4キーを押します。

Lighthouse監査を再実行し、[Passed Audits]を展開すると、[コンテンツはビューポートに対して正しいサイズです]と表示されます。

0
Artif3x