使用JQuery Mobile& Phonegap [英] Scale HTML content using JQuery Mobile & Phonegap

问题描述

我需要将HTML电子邮件中的内容动态加载到我的HTML中的某种类型的内容区域，以便适应iPhone / Android的原生邮件应用程序。我花了两天时间谷歌和测试没有用。我加载的HTML内容（通常设置为width = 600或一些不错的），而不是缩放，它显示如下：

iPhone模拟器示例

HTML非常简单：

 < div data-role =pageid =messagedetailpagedata-add-back-btn =true > 
< div data-role =contentid =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'






5. 我研究了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 +'）'）; 
  

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!

解决方案

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

这篇关于使用JQuery Mobile& Phonegap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！