# Dealing with PWAs on high resolution mobile devices

**URL:** <https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709>\
**Category:** Ask the community\
**Tags:** ui\
**Created:** [March 11, 2025, 2:22pm UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709 "2025-03-11T14:22:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oyvind.byhring](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/oyvind.byhring/32/1060_2.png) [@oyvind.byhring](https://community.appfarm.io/u/oyvind.byhring)\
**Post date:** [March 11, 2025, 2:22pm UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709/1 "2025-03-11T14:22:31Z")

</div>

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:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/7/7b4685e75cf1e13bc3ca3843e608a1967b392a63.png)  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/6/6fb8a592cb4d0c934994b3cc5bce2eefd3585510.png)

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [March 12, 2025, 10:30am UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709/2 "2025-03-12T10:30:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oyvind.byhring](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/oyvind.byhring/32/1060_2.png) [@oyvind.byhring](https://community.appfarm.io/u/oyvind.byhring)\
**Post date:** [March 13, 2025, 8:46am UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709/3 "2025-03-13T08:46:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [March 20, 2025, 11:53am UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709/4 "2025-03-20T11:53:07Z")

</div>

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.

 ![Regular Zoom](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/9/9b8da068b465fdccc06598a9cde9a0bf56959170.png)

 ![WIth minimum Zoom in Chrome](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/c/c0794f7b78c46b42a00fa0a81b2305ae924c44be.png)

The reason UI components might appear scaled down in Chrome DevTools could be due to a Chrome-specific simulation of the [viewport](https://www.w3schools.com/css/css_rwd_viewport.asp). 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

---

<div class="post-metadata">

**Author:** ![oyvind.byhring](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/oyvind.byhring/32/1060_2.png) [@oyvind.byhring](https://community.appfarm.io/u/oyvind.byhring)\
**Post date:** [March 20, 2025, 1:42pm UTC](https://community.appfarm.io/t/dealing-with-pwas-on-high-resolution-mobile-devices/1709/5 "2025-03-20T13:42:05Z")

</div>

Very thorough response, thank you!

I’ll follow up with the user(s)!
