DP aware breakpoints/media queries for Mobile Devices

[kasvith]

Hi Team,

This is a problem i came across while using uniStyles with various mobile device sizes.
In RN we uses DP to measure units, this is totally different from Web as in Web the pixel sizes and everything is handled by browsers

But if we consider a Native mobile app things are really difficult to handle as some devices(apple) has DPR values going upto 3.0

So in uniStyles if we want to look for a smaller mobile screen like iPhoneSE

Viewport Size: 320px × 568px
Screen Size: 640px × 1136px
Device Pixel Ratio: DPR 2

the width returned by uniStyles is 640 for iPhoneSE, but actually the screen size is 320

So the breakpoints, media queries we define doesnt work really well since uniStyle doesnt seems care about the DPR and returning the screen size(View Port Size x DPR)

this is a really difficult situation as in web it works(our breakpoints are in Pixels like in tailwind/bootstrap but they hold true to the view port size instead of true pixel count in web), but in RN we should also consider the DPR to get sizes

So i belive uniStyles should either handle this internally or provide utilities to handle it

from developer's perspective i dont care about the DPR(as how it should be with RN)

[jpudysz]

Hey @kasvith we will discuss it internally and back to you

[kasvith]

exactly...at least a version of it

so we can target smaller devices by just viewport dimensions with DP instead of worrying about true pixel width

since RN defaults to DP, MQs using true pixel width doesnt click in my head tbh

[kasvith]

Current setup is bit unnatural with when RN uses DP instead of true pixel dimensions...at least thats how i felt when using uniStyles

for web..current setup will just work as web doesnt care about this anyways

[jpudysz]

since RN defaults to DP, MQs using true pixel width doesnt click in my head tbh

Now it makes sense. They should match breakpoints and use values divided by pixels. I totally agree (at least for mobile).

Sorry, that I didn't understand what's the problem

[kasvith]

This was driving me insane while working with mobile in uniStyles

we discussed this in discord as well, glad that you got whats wrong...this is a very crucial thing to have

[kasvith]

if you can also release a patch for v2 as well