使用JQuery Mobile和Phonegap缩放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相同，但使用“create”，“resize”，“load”和“change”。
4. $(window).resize();
5. 抓取div并将其放入iFrame中（完全没有运气）
6. 我研究了iScroll、ScrollView、各种autoscale.js示例，但似乎没有符合我的需求的。

我开始怀疑这是否可能。如果有人能帮助我，我将永远感激不尽。我不介意被卡住几个小时，但一旦变成几天，就开始变得令人发狂。遗憾的是，这对我来说是一个停滞不前的问题。

非常感谢您提前的帮助！

- jstafford

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

- Jasper

---

谢谢，贾斯珀！它正在改变内容的大小，但： 1）容器不适应内容的大小，因为内容可以以任何HTML结构到达，所以无法找出最宽的元素。我正试图弄清楚如何触发父级来适应内容的宽度，以便我可以获得正确的比例。 2）如果我强制比例正确，元素会在页面上很远的位置被定位，并且看起来像被切成了一半，就像这样: 更新示例 我会继续尝试并让你知道。谢谢！ - jstafford

无论我怎么尝试，都无法让它正常工作。我可以在加载HTML后获取容器的宽度，但一旦我缩放它，就会出现各种不稳定的行为 - 即它将缩放的元素定位到页面的右中部，但页面仍然扩展到如果内容已经存在的大小。我无法使用CSS重新定位它。这不太好看。我甚至尝试将内容应用于一个不可见的元素，附加它，缩放它，然后使其可见，但结果总是相同的。我已经头痛了4个小时 - 欢迎任何想法... - jstafford

使用这个方法已经接近目标，但还需要改进：codevar adjustHeight = (((containerHeight - (containerHeight * ratio)) / 2) + 10) * -1; var adjustWidth = ((containerWidth * ratio) - (windowWidth / 2) + 20) * -1; $("#messagedetailcontainer").css(venderPrefix + 'Transform', 'scale(' + ratio + ')') $("#messagedetailcontainer").css({position:'relative', top: adjustHeight + 'px', left: adjustWidth + 'px'});code - jstafford

我本希望能够偶然发现一些内置的优雅方法来解决这个问题，但看起来蛮力是唯一的解决方案。感谢Jasper在这个解决方案上指引我正确的方向，我会将其标记为答案。谢谢！ - jstafford