I was involved in adding a resize feature to two web apps. They both had roughly the same requirements and of course each had a different approach that generated different problems. Although the idea is basically the same for each, and, the core concept on which they are based is one of the first things one learns when starting to play with CSS and HTML, getting to the end result is a bit more difficult.
This seems to be a bad idea when seeking solutions for fitting an existing page into a smartphone screen, but shines when you have an app that needs too look the same, albeit bigger, on bigger screens.
Hopefully, this article will help whoever receives an ‘exotic’ request like this with some trial and error lessons and a starting point.
The concept is actually really easy: set a font size of 100% on body and change that with Javascript when you need. If everything is done right, the entire page will update in one step to meet your resizing rules.
You should be using ems instead of pixels or percentages for element sizes. Use a calculator to transform pixel based sizes to ems ( for example, a 150 pixels long div should have its width set to 9,375em and so forth ).
When you have to change font-size for text, wrap that text in <span> or <p> and always change font-size only on those. This is VERY important, since all the children of the element on which you changed the font size will use that as base font-size if you don’t explicitly supply another.This means that instead of having everything in your app relative to one size, you’ll have more, and that will lead to problems with alignment because of the way browsers round numbers, when you change to font-size of the body.
Based on the previous work, I put together some “lessons learned” one might find useful:
- scale based on the smallest available size, keep your screen without scrolbars
- attention is key; if you change font-size often. you will break stuff faster than you can say dead
- you’ll have to avoid setting background images since they don’t work well with this type of scaling; you have to use an image for each graphical element and set it’s width or height relative to the application font-size ( <img src = ‘…’ height = ’0.875em’ /> )
- images used should be bigger than the size displayed, to avoid a quality loss when scaling upwards; i usually make them twice as big
- it’s a good idea to keep borders in pixels ( 1px is perfectly fine ) to avoid strange cases when borders become too thick
- I think it’s a must to disable zooming in your application
I think it’s really important to set a minimum size, beyond which your application won’t scale down
You can find a working example in this Github repo. It’s not the cleanest nor a polished example, but it should be enough to exemplify the approach.
Below, I attached some screenshots of the example page I put together for this article.
