What is the best practice for building an application that works with multiple device resolutions/sizes?
for example, using large vs small icons, using large fonts vs small fonts, etc…
does ionic provide anything out of the box, and if not, what is the best approach right now to make my app work the same way on small/low res devices and large/hi res devices?
This is also different from making a phone vs tablet layout, which is not part of my question for now at least.
Icons - Because the icons are icon fonts, they will render across all supported devices correctly. It’s the same way that fonts look good across all devices .
As far as making sure images and such look good on different displays ( retina vs non-retina), you want to just take some default approaches to deliver the appropriate sizes.
For font sizes, some simple css media queries can be used to adjust the font size as your screen gets larger, but IMO, the font sizes work well across all devices right out of the box.
I hope this covers everything. Let me know if you need any more advice
@mhartington Thanks for the reply, i just wanted to make sure i am not missing anything here, and needed a general guidance as this is my first project with ionic.
Once i make my trials, i will get back to you with my results and observations.
Thanks a lot.
Ah no worries, a good rule of thumb is to take some practices from traditional web development (i.e. handling of assets, css media queries) and you should be good.
Good luck!
1 Like