Stretch/Fit HTML Template and Children to Window

Question

My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.

I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?

I tried tweaking the meta tag;

<meta name="viewport" content="width=device-width, initial-scale=1.0>

Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?

Answer 1

I ended up using CSS3's

transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;

after dynamically calculating the scale ratio to take into account the 5px margin. Turns out

minimum-scale=0.1

was necessary for an older Android phone to display the re-sized view correctly.