Hardware-Pixel instead of CSS-Pixel

I’ve finished designing and coding a PG Tailwind site. It turns out, however, that on Google’s Pixel 9 XL, the browser uses actual pixels rather than CSS pixels, which makes everything appear far too small. Correcting this with JavaScript seems difficult, as the font specifications such as 4xl etc. don’t allow for it (but the animated title works best this way).

If this hasn’t already been checked, the first thing to look for is whether the page includes the correct viewport meta tag:

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

Without it, mobile browsers can render the page using a wider default layout viewport, which makes everything appear much smaller.

1 Like

I have the following generated by PG:

Thanks, Stephan