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

Question

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?

Answer 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

Answer 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>

Answer 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>

Answer 4

add this to your css:

html{overflow-x: hidden;}

Answer 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.

Answer 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.

Answer 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".