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

user_5674976 0
Viewed 10092

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?

lighthouse viewport css html javascript
8 Answers

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
user_68322840

add this to your css:

html{overflow-x: hidden;}
user_2630500

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.

user_101776790

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

user_24870330

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"));
user_11226290
Related