I’m dealing with an issue where end users of an app that’s installed as a PWA on an android phone get tiny UI elements.
They sent a screenshot, and after playing around with custom resolution simulation in the browser I see that they’re viewing the PWA at something like 950x2200, which makes a lot of the components (e.g. datepicker) tiny.
Is there a good way to deal with this other than turning down the resolution of the device?
I made an example app and took some screenshots that illustrates the problem, first on a “normal” (iPhone 14) resolution, and then the resolution of the users android device:
Hi,
Do you have a list of affected devices and OS versions?
And what kind of UI components are affected?
With some more info, I can attempt to replicate this on our test bench.
// Erik
From end-user:
The device is a Samsung s23 ultra, QHD+ (3088x1440).
The biggest problem seems to be the date picker component. I realize the underlying problem here is too many pixels on a small surface area, but I was hoping there was some way of scaling the entire app. I’m not familiar enough with Android devices to know how the browser handles displaying websites in a way that makes it readable.
Hi,
If this only affects one user, it suggests that they have modified their “Minimum Width” in Developer Settings or their Accessibility settings in Chrome.
The S23 Ultra, set to QHD+ on our test bench, did not have any scaling issues with the DateTime Picker. This was tested for both PWA and non-PWA apps.
The attached pictures show the difference between regular zoom and minimum zoom in Chrome. Keep in mind that adjusting the “Zoom” setting in Chrome will also affect the zoom level of the PWA app, as it runs in a fullscreen Chrome window.
The reason UI components might appear scaled down in Chrome DevTools could be due to a Chrome-specific simulation of the viewport. Firefox, Chrome, and the actual device all seem to scale the UI components differently.
Of course, if this turns out to not be a user-specific problem, then please reach out, and we will have another look at it.
// Erik
Very thorough response, thank you!
I’ll follow up with the user(s)!
