私のHTMLページのボディCSSを100％に設定し、余白やパディングなしで、 Viewportの内容が正しくサイズ変更されました "。 window.innerWidth === window.outerWidth灯台監査では、ボディ幅が100％であるにもかかわらず、ビューポートのコンテンツのサイズが正しくないと言われています
それは、ウィンドウのサイズは412pxであるのに対し、ビューポートのサイズは422pxで言えば
監査を渡し、これはウィンドウが望んでいたよりも10pxの幅が広いことを意味します。
body要素を検査すると、幅が412ピクセルであると表示されます。
私はこの監査に合格したいと思いますが、何が原因であるかのアイデアはありますか？
Nuxt Js（ブートストラップ付き）プロジェクトで作業中にこのエラーが発生しました。
divタグが正しく閉じられなかったためでした。通常、ビューポートメタタグが正しく宣言されていても、div階層が正しく管理されていないと、このエラーが発生します。例えば
：あなたは「コンテナ」または「コンテナ流体」を定義せずにクラス「行」を宣言した場合今
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
、サイトのコンテンツは、適切なマージンとに必要な&パディングをレンダリングしていませんコンテンツをモバイルデバイスに適合させる。これは、Google Lighthouseでこの監査が失敗する理由です。
これで問題が解決された場合はお知らせください。
これはちょうどあなたが行にあるCSSに依存し、あなたはブートストラップCSSを使用しています。 –
私はライトハウスを走らせた後、まったく同じエラー（正確なピクセルサイズ）を持っています。この問題を解決できましたか？ – TheoG
私は一般的な解決策についてはわかりませんが、私が示唆していることは次のとおりです。 1.ボディの内容が身体の幅（マージン、ボーダーなどを含む）を超えないようにしてください。また、body要素とchild要素のposition cssプロパティを使いこなそうとしてください。オーバーフロープロパティも考慮してください。 2.＃1で解決できない場合は、innerWidthをinnerWidthに強制する小さなスクリプトをouterWidth、https://stackoverflow.com/questions/10385768/how-do-you-resizeに追加するという残忍な修正があります-a-browser-window-so-inner-width-a-specific-valueは動作しても良い解決策ではありませんが、がんばろう。 –