Lighthouse Error: Content is not sized correctly for the viewport

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 running that audit!


Written by Jon Kuperman living in Florida taking some time between jobs. You should follow him on Twitter

Webmentions

00
    Loading Webmentions...

Related Posts

Subscribe to my email list!

Let me be real with you. Sometimes when I'm bored I log in to Buttondown and look at the audience number. If it's bigger than it was the week before, well that makes me feel really happy!

I promise I'll never spam you and I will, at most, send you a monthly update with what's happening on this site.

© 2021, Jon Kuperman