Question

I need to dynamically load content from HTML emails into some type of content area within my HTML so that it is scaled to fit, exactly the way the native mail apps do for iPhone/Android. I have spent two days Googling and testing to no avail. I’m loading the HTML content (which is often set to width=600 or something nice), but rather than scaling, it is appearing as follows:

iPhone Simulator Example

The HTML is very simple:

<div data-role="page" id="messagedetailpage" data-add-back-btn="true">
    <div data-role="content" id="messagedetailcontainer"></div>
</div>

The sanitized email HTML is loaded into a div (messagedetailcontainer), at which point I’ve tried the following things:

1. Resize the viewport with: $.mobile.metaViewportContent = “width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0,5”;

2. Call several triggers on the div such as: $(“#messagedetailcontainer”).append(data.msg_body).trigger(‘updatelayout’);

3. Same as #2, but with ‘create’, ‘resize’, ‘load’, and ‘change’.

4. $(window).resize();

5. Scrapping the div and putting it in an iFrame (no luck at all)

6. I’ve research iScroll, ScrollView, various autoscale.js examples, but nothing seems to fit my need.

I’m starting to wonder if this is even possible. If anyone can help me I will be eternally grateful. I don’t mind being stuck for hours, but once it turns to days it starts to become maddening. And sadly this is a show-stopper for me.

Thanks in advance for any help!

Answer 1

You could get the width of the view-port and the width of the content, then scale the content down based on a ratio of the two:

var venderPrefix = ($.browser.webkit)  ? 'Webkit' : 
                   ($.browser.mozilla) ? 'Moz' :
                   ($.browser.ms)      ? 'Ms' :
                   ($.browser.opera)   ? 'O' : '';
var ratio = $(window).width() / $('#newContent').width();
$('#newContent').css(venderPrefix + 'Transform', 'scale(' + ratio + ')');