'Why are Googlebot smartphone / Device Tools rendering my page differently than the actual device when using meta viewport initial-scale tag?

I'm using the following tag in my HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

This renders my page properly on my physical phone and Lighthouse tool:

Phone / Lighthouse tool

However, when Googlebot goes through the page for the search engine, or when I use Device Tools in Chrome, it renders it like this:

Googlebot smartphone / Device Tools render

If I change the viewport to include minimum-scale=1 like:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

Google Device Tools will render it correctly but on mobile I will not be able to zoom out of the page anymore, which is expected.

I do have a table that overflows at the bottom, could that be the issue in the difference in renders?

Why is Google tools not rendering the initial-scale=1 correctly?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source