How to calculate screen resolution change

Question

I have an application that is on a mobile device. I am moving resolutions of my app from 240W x 320L to 640W X 480L.

I have a bunch of columns that have their width in pixels (say 55 for example). I need to convert this to the new resolution.

"Easy", I thought 640/240 = 2 2/3. So I just take 55 * 2.6666667 and that is my new width.

Alas, that did not work. My columns (all together) are larger than my screen size now.

I tried 55 * 2 and that is too small. I am sure I can get there with trial an error, but I want to know an exact ratio.

So, what am I missing? how do I calculate my new column widths (other than by trial and error).

Answer 1

I think your logic is good, but maybe you had rounding errors? If you want to make sure the total width is less than the screen resolution, after multiplying by the scale factor you should always round down to the nearest integer to get the width in pixels.

Also, if your columns have any padding, borders, or other space between them, you would have to take that into account as well.

If you can run on a desktop environment, I know there are "pixel ruler" sort of tools to actually measure things on the screen, you can search Google for them.

Answer 2

The screen DPI is changing when resolution changes. So you need to take this into account.
Check this link about DPI Aware apps and search according to your platform (Native or CF)

Answer 3

Rounding is your problem; Suppose that you have 24 columns of 10 pixels on the 240 pixel display. You calculate the new width: 10*2.667 = 27 so the total width sums to: 648 > 640. Oops...

To get this right you need to scale the absolute location of the column. That is if column number k begins on x-coordinate = X then after scaling it should begin on round(X*2.667). After this subtract rounded right side X from rounded left side X to get the width. This way you will round widths down and some up, but the total width will remain inside your limits.