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

javascript html css viewport lighthouse
George picture George · Nov 15, 2017 · Viewed 7.5k times · Source

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

uribalb picture uribalb · Jul 17, 2018

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

Related questions

Check if element is between 30% and 60% of the viewport

I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport. So I have this grid of elements stacking side by side like this: I ran into few plugins like Waypoints, …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More