I just built the most insanely awesome complicated app over the course of the last 6 months for both iOS and Android using React native.
Everything was going perfect, and everything is working great...
I designed for iPhone 4s, 5, 6, 6+ using a special component I wrote which basically works like...
override: {
ip4: { fontSize: 8 },
ip5: { fontSize: 10 }
}
etc.
This actually worked perfect for iOS.
Today I opened up GA and was terrified to realize I forgot to style Android. I looked at our Google analytics and there's literally like... 700 screen sizes that are all different.
I'm utterly confused at the prospect of designing for all these, especially considering theres multiple pixel densities.
My question is, WHAT do I actually do to account for...
- margins / spacings (basically generic integers for padding or whatever)
- font sizes
Those are the 2 things I'm very confused how to handle all the different combinations.
I've taken a look at PixelRatio, but I have no idea how to use it or even if I'm on the right track.
How do most people handle this?