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:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Thanks, Stephan
Hi,
The “using actual pixels instead of CSS pixels” part sounds unlikely to us. If that were happening, a huge number of websites would be broken on Pixel devices.
My suspicion is that there’s another factor involved (viewport, scaling, breakpoints, devicePixelRatio handling, etc.).
Do you have a URL or a reduced test case we can take a look at?
Hi Emmanuel
URL is:
https://photography.frydesign.ch
https://photography.frydesign.ch/index-button.html (attempt to fix the problem)
Last one has now a JS Code at the end ( // — CSS-Pixel statt phys. Auflösung —) and a link to an custom-css.css file with some code (that didn’t work).
Freundliche Grüsse
Stephan Fry
Mettlenstrasse 8
8708 Männedorf
Hi,
Thanks for the feedback.
We don’t own a Pixel 9 XL and haven’t had the opportunity to test on one directly, so we can’t verify the behaviour you’re describing on that specific device.
That said, we did test the site on a range of desktop and mobile devices available to us, and it behaved as expected in those environments.
Pinegrow doesn’t provide any specific helpers for handling device-specific rendering or scaling issues. If a particular device requires special treatment, that would typically need to be addressed within the project’s own CSS and/or JavaScript, based on the behaviour observed on that device.
Hi Emmanuel
Yes, when you enter the values for the Pixel 9 in CSS-pixel it works. But on a friends Pixel 9 XL Pro the buttons were so little they coudn’t almost be seen (otherwise I even wouldn’t know). When I entered the Device-Pixel for Pixel 9 it appears like on my friends mobile. Strange!
Freundliche Grüsse
Stephan Fry
Mettlenstrasse 8
8708 Männedorf
The only “recurring” topic I found related to Pixel 9 Pro / Pro XL devices concerns Android display resolution settings (“High Resolution” vs “Full Resolution”).