Lighthouse audit says content not sized correctly for viewport, despite body width being 100%

问题

I have set the body css of my html page to 100% and with no margins or padding, but it still does not pass the following Google Lighthouse audit "Content Sized Correctly for Viewport".

The audit passes if window.innerWidth === window.outerWidth

It says the viewport size is 422px whereas the window size is 412px, so this means the window is 10px wider than wanted.

When I inspect the body element, it is showing as being 412px wide.

I would like to pass this audit, any ideas of what is causing this?

回答1:

When you reveal the DevTools panel, it usually appears next to the main application page, which messes with the viewport size. I solved the problem by:

maximizing the browser window
docking the DevTools panel below the page

回答2:

If you have an "orphan" row Lighthouse fires that error. You need to check where you are using that row and wrap it in a class container-fluid like this:

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

回答3:

I came across this error when adding my own class to container div that only added some top padding:

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

Moving my custom class outside made the audit message go away.

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

回答4:

add this to your css:

html{overflow-x: hidden;}

回答5:

I came across this error while working with Nuxt Js (with Bootstrap) project.

It was due to div tags not closed properly. Normally, you encounter this error when the div hierarchy is not properly maintained, even if you have properly declared viewport meta tag.

For example:

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

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

Now, if you declare class "row" without defining "container" or "container-fluid", the site content doesn't render with proper margins & paddings needed to fit the content on mobile device; which is the reason why this audit fails on Google Lighthouse.

Let me know, if this resolves your issue.

回答6:

Before running the audit test, set the zoom of the browser to 100%. At 100% zoom I passed the audit. For smaller or greater that 100% zoom I got the "Content is not sized correctly for viewport" message - for the desktop audit. Mobile audit was always ok.

回答7:

This setting is affected by the chrome in some browsers. Notably, Vivaldi's "Panel" on the left side (by default) alters the measurement Lighthouse is using to compare window.innerWidth === window.outerWidth. You'll need to turn this off to make it work.

To turn this off in Vivaldi, click the main Vivaldi menu in the upper left corner, select "View", then "Show Panel" to toggle it. Alternatively, hit the F4 key.

Rerun your Lighthouse audit, expand the "Passed Audits" and you should see "Content is size correctly for the viewport".

回答8:

I'm using Bootstrap 3 and also had this message. After a while I found out that this was because the bootstrap style sheet was not included. I'm using .net MVC with Razor and had to add the following line in my layout.cshtml:

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

BundleConfig.cs:

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

来源：https://stackoverflow.com/questions/47307689/lighthouse-audit-says-content-not-sized-correctly-for-viewport-despite-body-wid

标签

javascript

html

css

viewport

Lighthouse