how to determine how many columns in a mobile app could be rendered reasonably? (screen size/resolution/orientation)

Question

Question: For a mobile app being developed with a cross-platform tool, how would one determine how many columns in a mobile app could be rendered reasonably? For example how to determine whether extra columns could be placed in a layout for a given view?

Notes:

With the mix of IOS/Android devices, different resolutions, portrait/landscape, does the answer lie in the physical dimensions of the screen? I assume that using screen width in pixels might not be appropriate as it may not indicate how physically big the screen is.

For example, for the sake of discussion, if you had an application that you data to be displayed in columns and you had say determined that for readability for a user that (I'm making these up):

• iPhone Portrait - 1 column
• iPhone Landscape - 2 columns
• iPad Portrait - 2 columns
• iPad Landscape - 3 columns

However beyond iPad/iPhone there are all the Android devices, so assuming here one needs a formula/approach to determining at run time how many columns to try to display to the user.

So the assumption is you are using a cross platform development tool such as: Corona SDK, Phone Gap, Titanium, MoSync etc

Answer 1

You want to use density-independent pixels when considering device screen size and column sizes.

I do something similar to this in one of my apps, Housters, actually. (If you want some visualization for my answer, hit up the Google Play Store.) I'll answer in pseudo code, since you've given a spread of possible products you might use.

First, I determine if it's a tablet or not. This is rather arbitrary these days, but the following formula works well for me:

var isTablet = Math.min(platformWidthInDP, platformHeightInDP) > 500;

This correctly identifies my Nexus 5, EPIC 4G, EVO 4G, Galaxy S3, and others I've tested as phones, and Nexus 7/10, Tab 7+/10, and others as tablets.

For phones, I always use 1 column, regardless of orientation. It was just too squashed in landscape, especially when the keyboard is up.

For tablets, I calculate a relatively desirable width based on wanting the columns to fit well on the screen. I take the least of the screen dimensions, divide it by two, and then make sure it's at least 320dp wide (you might be able to tolerate a smaller value, depending on your column content, such as 250dp).

var minPlatformWidth = Math.min(platformWidthInDP, platformHeightInDP));
var width = Math.max(minPlatformWidth / 2, 320);

This way, even with all the variations in screen sizes out there, my columns size nicely to fill the screen. And they have a static size, so there isn't too much trickery going on when the user reorients the device.

Answer 2

Since you are using a webview, you could abandon trying to do it via javascript, and go for the much easier (once you learn it) solution of responsive web design.

See for example this: http://responsivedesign.is/develop/css/css3-multiple-columns And change the size of your browser. The number of columns gets from 3 to 2, and then from 2 to 1 as you make your browser window shorter.

Or look at this example: http://www.greenpeace.de/ Again, start making your browser window, and you will see that the design changes.

Al that is happening with css only and it is much lighter for your application