Supporting multiple screen resolutions when developing for mobile devices

[Kevin MacDonald]

I am building an app using angularjs and cordova targetting primarily the iPad. However, I've tested out the app on an iPhone and everything works great, except the app needs to be re-formatted in many ways to suit the smaller screen resolution. I would love to support both devices with a single code base, and deploy only a single app to the App store. I am looking for good techniques for achieving this.

I've seen two ways to support multiple screen resolutions with the same code base: swapping CSS based on media queries, and dynamically swapping out HTML templates for views and directives. I would like to solicit some opinions on this. Does it make sense to have a single code base for phone and tablet? One fear I have is that the dramatically different screen real estate would force me to not only change every template, but I would also have to have completely different navigation and user flow, and therefore much of the javascript would change as well. If that happens it seems better to just have two different code bases.

Thoughts?

[Mike Alsup]

​> ​

Does it make sense to have a single code base for phone and tablet?

​Y​es, it does.

Unless you envision the tablet and phone UX to be radically different, then media queries are the way to go.

[Luke Kende]

This is basically a question about making your app "responsive".  I agree that CSS @media queries are the way to go instead of separate templates and javascript.  You may have to modify your templates to meet both resolutions since you only initially developed for one, but overall you will be happier than managing different code bases.

[Kevin MacDonald]

Thanks for these thoughts. What I am hearing so far is that in theory, a single code base with responsive CSS is the way to go, but in practice, it's a big pain in the butt and often impractical. I have to say I have my doubts that something like bootstrap can just magically make everything align beautifully on multiple screen resolutions in a way that is usable. 

With regards to the question: how radically different are the layouts between a 1024x768 iPad screen vs a 320x480 iPhone? I would say, the differences will be radical. I have my doubts that I will have the same number of views because I simply won't be able to fit everything from one view on the iPad to a corresponding view on the iPhone. If that is true then it implies changes to user work flow and navigation, which starts to sounds like a different application. 

Kevin

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8YpwXWvfT_E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Mauro Servienti]

+1

Sent from my Amazing Yellow Lumia, typos are guaranteed ;-)

---

From: Kevin MacDonald
Sent: ‎24/‎02/‎2014 17.09
To: ang...@googlegroups.com
Subject: Re: [AngularJS] Re: Supporting multiple screen resolutions when developing for mobile devices

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Andy Joslin]

I have one codebase, but multiple templates.  Depending upon the resolution of the device, a different template is loaded.

Some templates can also be shared between all devices without problems.