Lighthouse Error: Content is not sized correctly for the viewport
November 18, 2018
If you’re like me, you probably spend quite a bit of time chasing those perfect 100’s in Lighthouse. One error I’ve run into multiple times is
Content is not sized correctly for the viewport.
This error can occur for multiple reasons. The Lighthouse rule checks
window.innerWidth === window.outerWidth;
Sometimes you have some quirky CSS causing this problem but something that’s happened to me time and time again is leaving my browser tab zoomed in. If you zoom in our out before running a Lighthouse Audit, it can report back a false positive for content not being correctly sized for the viewport.
This is because the value of
window.innerWidth changes as you zoom in or out but
window.outerWidth stays the same!
So make sure you cmd+0 (or ctrl+0) before runnning that audit!
My name is Jon Kuperman. I'm a developer, teacher and open source evangelist. You should follow me on Twitter.