摘要
最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的app推送一条服务号消息，并且在单击该消息的时候，需要展示邮件的详情。
技术
这里是使用Exchange EWS API来实现的，通知的时候，只获取该邮件的标题，发件人信息，当用户单击查看详情的时候，拉取邮件详情，由于Exhcnage2012版本不支持纯文本格式的邮件内容，所以，在拉取的邮件信息是html格式的。这里面就涉及到如何自适应展示的问题。
中间尝试了几种对table，img做特殊处理方式，在我前面文章中也提到了这方面的内容，感兴趣的可以移步。但都不是特别的完美。总有一些页面中有些特别的标签，也有特别存在的table包裹img，这个时候发现缩放起来就不行了，也有导致图片高度拉伸变形的。
最后，和同事尝试了缩小整个邮件内容的方式。
首先需要摘取去html，body，head标签的邮件内容。
这里封装了一个简单的方法，可以实现：
private string SubEmailHtml(string html) { html = html.Replace("</head>", "").Replace("</body>", "").Replace("</html>", "").Replace("<head>", ""); int htmlStartIndex = html.IndexOf("<html"); int htmlEndIndex = html.IndexOf(">", htmlStartIndex); html = html.Substring(htmlEndIndex + 1); int bodyStartIndex = html.IndexOf("<body"); string htmlPart1 = html.Substring(0, bodyStartIndex); string htmlPart2 = html.Substring(bodyStartIndex); bodyStartIndex = htmlPart2.IndexOf("<body"); int bodyEndIndex = htmlPart2.IndexOf(">", bodyStartIndex); html = htmlPart1 + htmlPart2.Substring(bodyEndIndex + 1); return html; }
最后将返回的邮件内容塞入页面的div容器中。
<div class="topdiv" id="topdiv"> <div class="email-content" id="mailContent"> @Html.Raw(@Model.MailContent) </div> </div>
css代码片段
<style> .btn-zoom { 50px; height: 50px; position: fixed; border-radius: 999px; bottom: 60px; right: 12px; background: rgba(0,0,0,0.4); z-index: 99999; text-align: center; line-height: 50px; } .btn-zoom img { 55%; height: 55%; } .topdiv { padding-left: 12px; min-height: 700px; background-color: #fff; overflow: hidden; } .topdiv-zoom { overflow: auto; 100%; min-height: 1050px; } .email-content { margin-top: 12px; overflow: hidden; display: inline-block; background-color: #fff; background-position: center top; background-size: 100%; background-image: url('@Url.Scrpit("~/Content/Images/print_bg.png")'); } </style>
通过js控制是否进行缩放，如果内容宽度大于了手机屏幕的宽度，则进行缩放，否则原样展示邮件内容。
var $content = $("#mailContent"); var screenWidth = window.screen.width; console.log("screenWidth", screenWidth); var x = 1; var contentWidth = $content.width(); console.log("$content.width", $content.width()); var emailHtml = $("#topdiv").html(); if (contentWidth > screenWidth) { $("#dvzoom").css("display", "block"); x = (screenWidth - 24) / contentWidth; $("#topdiv").css("height", ($content.height() * x) + 50 + "px"); console.log(x); //transform:translate3d(0px,0px,0px) scale3d(0.1,0.5,1) $content.css("transform", "translate3d(0px,0px,0px) scale3d(" + x + "," + x + ",1)").css("transform-origin", "0px 0px 0px"); }; var isClick = false; var first = 1; $("#dvzoom").click(function () { isClick = !isClick; if (first == 1) { $content.css("-webkit-transition", "all .25s ease-in-out"); }; first++; // 相当于 if ($("#topdiv").hasClass("topdiv")) { $("#topdiv").removeClass("topdiv").css("overflow", "auto"); $content.css("overflow", "auto").css("display", ""); $("#topdiv").addClass("topdiv-zoom"); } else { $("#topdiv").removeClass("topdiv-zoom"); $("#topdiv").addClass("topdiv").css("overflow", "auto"); $content.css("overflow", "hidden").css("width", contentWidth + 'px').css("display", "inline-block"); }; if (isClick) { $("#dvzoom").find('img').attr("src", '@Url.Scrpit("~/Content/Images/full-screen-back.png")'); $content.css("transform", "translate3d(0px,0px,0px) scale3d(1,1,1)").css("transform-origin", "0px 0px 0px").css('margin-top', '0px'); } else { console.log(x); $("#dvzoom").find('img').attr("src", '@Url.Scrpit("~/Content/Images/full-screen.png")'); //$("#topdiv").css("overflow", "hidden").css("width", "100%").css("min-height", "1050px"); $content.css("transform", "translate3d(0px,0px,0px) scale3d(" + x + "," + x + ",1)").css("transform-origin", "0px 0px 0px"); }; });
这里是通过一个悬浮的放大缩小div来控制的，至于通过手势来实现，那只能在之后慢慢往上面添加了。
效果图
放大后的邮件内容，可以拖放
后话
之后会实现邮件内容的手势缩放的功能，目前通过单击按钮实现的也是最简单的。