标签:
在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody。每封邮件又没什么规律,用正则表达式来匹配内容并不合适,另外又要保持原邮件的格式。这个确实很难统一。目前是使用iframe标签,将原邮件的html在iframe中展示。但问题又来了,如果邮寄中有大表格,大图片,如何保持邮件内容自适应?
通常的做法是在head中添加meta标签
<meta name="viewport" content="width=device-width,user-scalable=0" />
但并不能解决所有的问题。
1.图片
图片自适应
img{ max-height:720px; max-width:640px; width:expression(this.width > 640 && this.height < this.width ? 640: true); }
通过上面的代码,来控制图片的宽度,但也并不完美。因为手机屏幕到底多宽,是不确定的,目前是让iframe自适应,然后将宽度图片宽度设置为100%。
2.table
表格问题,最让人头疼,如果是单列的表格,还能做到适应,如果遇到table中嵌套table,嵌套img的,还是适应不了。今天,在想,多列的适应不了,那么我给它转成一列的能否解决问题?
也算一种尝试,不知道能否解决。
@{ ViewBag.Title = "Table"; } @model IEnumerable<Wolfy.LogMonitor.Models.Log> <table style="width:100%;" id="tb1" border="1"> <tr> <td>类型</td> <td>内容</td> <td>时间</td> @*<td>嵌套table</td>*@ </tr> @foreach (var item in Model) { <tr> <td>@item.Type</td> <td>@item.Content</td> <td>@item.Dt</td> @*<td> <table style="width:100%;" id="tb2"> <tr> <td>类型</td> <td>内容</td> <td>时间</td> </tr> @foreach (var item2 in Model) { <tr> <td>@item2.Type</td> <td>@item2.Content</td> <td>@item2.Dt</td> </tr> } </table> </td>*@ </tr> } </table> <script> $.fn.convertColumns2Rows = function (obj) { console.log(obj); var self = new Object(); if (!obj) { var self = this; } else { self = obj; } var tds = $(self).find("tr").find("td"); if (tds.length > 2) { //清空原表格内容 $(self).html(‘‘); $.each(tds, function (index, element) { $.fn.convertColumns2Rows($(element)); $(‘<tr><td>‘ + $(element).html() + ‘</td></tr>‘).appendTo($(self)); }); } }; var tables = $("table"); console.log(tables.length) for (var i = 0; i < tables.length; i++) { $(tables[i]).convertColumns2Rows(); } //$("#tb2").convertColumns2Rows(); </script>
上面,为表格添加了扩展方法,实现将多列的表格转换为一列多行的。
原始表格
转换后的表格
以及表格嵌套表格,在扩展方法中,添加了递归。
转换后的
关于exhange中email内容的展示,目前也没一个完美的解决方案,怎么让它自适应。目前也尝试很多方法。这个行转列的问题,也是进行尝试的一种。exchange返回的html并没有自己做自适应,只能在返回的内容中,自己做适配了。如果你也遇到这样的问题,该如何解决?期待更好的解决方案。
标签:
原文地址:http://www.cnblogs.com/Leo_wl/p/5747686.html