CODEWITHSUNDEEP
angularjsmobileionic-frameworkhybrid-mobile-app
tamakisquare
tamakisquare

Reputation: 17077

Ionic framework: Single code base for various mobile devices (iOS, Android, phones, tablets)?

I am planning to develop a mobile app that completely duplicates the features that my web app offers. The web app is running on AngularJS + Django + Django REST Framework. The backend is essentially an API server, so it is pretty much ready to support a mobile frontend.

Although I know my stuff in the web development space, mobile development is completely new to me. With no prior mobile development experience and the lack of resources (as always, fund and time), HTML5/SASS/AngularJS are my best friends, so Ionic Framework + AngularJS seems to be the most viable solution for my situation.

A major requirement of this Ionic app is that it needs to support various mobile devices, ranging from iOS to Android and from phones to tablets.

With different design guidelines for iOS and Android and the different screen sizes between phones and tablets, could this requirement be met with one single code base?

If yes, what are the cons or limitations? Is this a common approach?

If no, what's the common approach in the Ionic world in supporting various mobile devices?

Upvotes: 1

Views: 660

Answers (1)

GONeale
GONeale

Reputation: 26484

I use the same codebase for my Ionic hybrid app deployed as a native Android and iOS via Cordova and additionally viewable as a mobile website.

Nearly every component/layout in Ionic scales nicely between mobile and tablet devices (in some cases, you may wish to make concessions for tablet - font scaling, content adjustments etc which can be achieved by using something like mobiledetect.js and CSS media query targeting), and between devices such as iOS and Android scales with no issues at all.

You even get some inherent coolness with Ionic components such as the modal popup whereby on iPad/desktop it displays as a modal popup in the center of the screen, but on phone it resizes to take up the scale of the entire screen, looking simply like a full screen page.

Hope that helps get you on your way.

Upvotes: 0

Related Questions