Jquery mobile 使用JQuery Mobile&；缩放HTML内容；音差

我需要动态地将HTML电子邮件中的内容加载到HTML中的某些类型的内容区域中，这样它就可以进行缩放以适应需要，就像本机邮件应用在iPhone/Android上所做的那样。我花了两天时间在谷歌上搜索和测试，但都没有用。我正在加载HTML内容（通常设置为width=600或其他更好的设置），但它没有按比例缩放，而是显示如下：

HTML非常简单：

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

经过消毒的电子邮件HTML被加载到一个div（messagedetailcontainer）中，在这一点上，我尝试了以下方法：

使用以下命令调整视口大小：$.mobile.metaViewportContent=“宽度=设备宽度，初始比例=0.5，最小比例=0.5，最大比例=0,5”

在div上调用几个触发器，例如：$（“#messagedetailcontainer”）.append（data.msg_body.trigger（'updatelayout'）

与#2相同，但带有“创建”、“调整大小”、“加载”和“更改”

$（窗口）.resize（）

报废div并将其放入iFrame（一点运气都没有）

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

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

---

提前感谢您的帮助

您可以获得查看端口的宽度和内容的宽度，然后根据两者的比例缩小内容：

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

---

谢谢，贾斯珀！它改变了内容的大小，但是：1）容器不适应内容的大小，而且由于内容可以以任何HTML结构到达，因此不可能找出最宽的元素。我试图找出如何触发家长适应内容宽度，以便获得正确的比率。2） 如果我强制使比率正确，元素会被放置在页面下方很远的地方，看起来像是被切成两半，就像这样：我会继续使用它，并让您知道。谢谢尽管我尽了最大努力，我还是无法让它发挥作用。加载HTML后，我可以获得容器的宽度，但一旦我缩放它，各种不稳定的行为就会开始——即它将缩放的元素定位在页面的右中间部分，但页面仍然会扩展到如果内容在那里的话会达到的大小。我无法用CSS重新定位它。这不漂亮。我甚至尝试将内容应用于一个不可见的元素，添加它，缩放它，然后使它可见，但结果总是一样的。4个小时的敲打我的头-欢迎任何想法…通过使用这个来接近，但仍然需要工作：

code

var-adjustHeight=（（（集装箱重量-（集装箱重量*比率））/2）+10）*-1；var adjustWidth=（（集装箱宽度*比率）-（窗宽/2）+20）*-1$（“#messagedetailcontainer”）.css（venderPrefix+'Transform'，scale（'+ratio+'））$（“#messagedetailcontainer”）.css（{位置：'relative'，顶部：adjustHeight+'px'，左侧：adjustWidth+'px'）

code

我本想偶然发现一些内置的、优雅的方法来实现这一点，但看来暴力是唯一的解决方案。贾斯珀，为我指出了这个解决方案的正确方向，我将把这个标记为答案。谢谢