Scaling an App on different Screen Sizes

What are your thoughts on scaling an app to fit the different screen sizes ?

I recently coded a simple FX Calculator App based on WebOS Ports Calculator app.

The original code appear to be designed to scale with screen size. Which I guess make sense so you can have the same App working for different screen size phone as well as tablets. But in practice the scaling wasn't quite working as I hoped for.

- If you have width in % e.g
height: 90%;
it doesn't appear to get recalculated after the initial rendering. To fix that had to explicitly do the recalculation on the reflow method.

- If you have % for Text Size, it doesn't scale proportionally with screen size. Haven't found a good solution for this. In the end settled for using CSS media/device queries to have different style sheets for popular screen sizes.

- Scaling images - I started using Icon Fonts which worked well but still have the problem with Text size issue.

Have anyone come across these challenges ? How did you get over these ?

I get sometimes scaling is not the right solution (especially when it comes to large screen sizes like tablets). To better use the extra screen space its sometimes better to show more content using panels etc. But for a simple calculator its probably not going to make lot of sense.

PS: for anyone interested in how to use Icon Fonts try...

-- Go to fontello and select the icons you like

-- Optionally, for any platform that cannot support custom fonts, convert them to javascript using cufon


Sign In or Register to comment.