使用 JQuery Mobile 和 JQuery Mobile 缩放 HTML 内容音位间隙

Question

我需要将 HTML 电子邮件中的内容动态加载到 HTML 中的某种类型的内容区域中，以便进行缩放以适应，这与 iPhone/Android 的本机邮件应用程序完全相同。我花了两天的时间进行谷歌搜索和测试，但没有成功。我正在加载 HTML 内容（通常设置为 width=600 或其他不错的值），但它不是缩放，而是显示如下：

iPhone 模拟器示例

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相同，但具有“创建”、“调整大小”、“加载”和“更改”。

4. $(window).resize();

5. 废弃div并将其放入iFrame中（一点运气都没有）

6. 我研究了iScroll，ScrollView，各种自动缩放.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 + ')');