HTMLページの本文のCSSを100%に設定し、余白やパディングはありませんが、それでも次の処理に合格しません Google Lighthouse 「ビューポート用に正しくサイズ設定されたコンテンツ」を監査します。
Window.innerWidth === window.outerWidthの場合、監査は合格です
ビューポートのサイズが422pxであるのに対し、ウィンドウのサイズは412pxであると表示されているため、これはウィンドウが必要以上に10px広いことを意味します。
Body要素を調べると、幅が412pxであると表示されています。
この監査に合格したいのですが、これを引き起こしている原因について何か考えはありますか?
DevToolsパネルを表示すると、通常、メインアプリケーションページの横に表示され、ビューポートのサイズが乱れます。私は次の方法で問題を解決しました:
"Orphan" row
Lighthouseがある場合、そのエラーが発生します。そのrow
を使用している場所を確認し、次のようにクラスcontainer-fluid
でラップする必要があります。
<div class="container-fluid">
<div class="row"></div>
</div>
コンテナ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>
これをCSSに追加します。
html{overflow-x: hidden;}
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"));
監査テストを実行する前に、ブラウザのズームを100%に設定してください。 100%ズームで監査に合格しました。 100%ズームよりも小さいまたは大きい場合、デスクトップ監査用に「コンテンツのサイズがビューポートに対して正しく設定されていません」というメッセージが表示されます。モバイル監査は常に問題ありませんでした。
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で失敗する理由です。
これで問題が解決した場合はお知らせください。
この設定is一部のブラウザではchromeの影響を受けます。特に、Vivaldiの左側の「パネル」(デフォルト) Lighthouseがwindow.innerWidth === window.outerWidth
を比較するために使用している測定値を変更します。これを機能させるには、これをオフにする必要があります。
Vivaldiでこれをオフにするには、左上隅にあるメインのVivaldiメニューをクリックし、[表示]、[パネルの表示]の順に選択して切り替えます。または、F4
キーを押します。
Lighthouse監査を再実行し、[Passed Audits]を展開すると、[コンテンツはビューポートに対して正しいサイズです]と表示されます。