使用 JQuery Mobile 和 Phonegap 缩放 HTML 内容

Question

我需要将 HTML 电子邮件中的内容动态加载到我的 HTML 中的某种类型的内容区域中，以便对其进行缩放以适应 iPhone/Android 的原生邮件应用程序。我花了两天时间谷歌搜索和测试无济于事。我正在加载 HTML 内容（通常设置为 width=600 或其他好东西），但不是缩放，而是如下所示：

iPhone Simulator Example

HTML 很简单：

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

净化后的电子邮件 HTML 被加载到一个 div（messagedetailcontainer）中，此时我尝试了以下操作：

1. 调整视口大小：$.mobile.metaViewportContent = "width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0,5";

2. 在 div 上调用多个触发器，例如：$("#messagedetailcontainer").append(data.msg_body).trigger('updatelayout');

3. 与 #2 相同，但具有“create”、“resize”、“load”和“change”。

4. $(window).resize();

5. 报废 div 并将其放入 iFrame（完全没有运气）

6. 我研究了 iScroll、ScrollView、各种 autoscale.js 示例，但似乎没有什么适合我的需要。

我开始怀疑这是否可能。如果有人可以帮助我，我将永远感激不尽。我不介意被困几个小时，但一旦变成几天，它就开始变得令人抓狂。可悲的是，这对我来说是一个阻碍。

提前感谢您的帮助！

Answer 1

你可以得到视口的宽度和内容的宽度，然后根据两者的比例缩小内容：

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 + ')');