摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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 + );

            int bodyStartIndex = html.IndexOf("<body");

            string htmlPart1 = html.Substring(, bodyStartIndex);

            string htmlPart2 = html.Substring(bodyStartIndex);

            bodyStartIndex = htmlPart2.IndexOf("<body");

            int bodyEndIndex = htmlPart2.IndexOf(">", bodyStartIndex);

            html = htmlPart1 + htmlPart2.Substring(bodyEndIndex + );

            return html;

        }

最后将返回的邮件内容塞入页面的div容器中。

    <div class="topdiv" id="topdiv">

        <div class="email-content" id="mailContent">

            @Html.Raw(@Model.MailContent)

        </div>

    </div>

css代码片段

<style>

        .btn-zoom {

            width: 50px;

            height: 50px;

            position: fixed;

            border-radius: 999px;

            bottom: 60px;

            right: 12px;

            background: rgba(,,,0.4);

            z-index: ;

            text-align: center;

            line-height: 50px;

        }

            .btn-zoom img {

                width: %;

                height: %;

            }

        .topdiv {

            padding-left: 12px;

            min-height: 700px;

            background-color: #fff;

            overflow: hidden;

        }

        .topdiv-zoom {

            overflow: auto;

            width: %;

            min-height: 1050px;

        }

        .email-content {

            margin-top: 12px;

            overflow: hidden;

            display: inline-block;

            background-color: #fff;

            background-position: center top;

            background-size: %;

            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来控制的，至于通过手势来实现，那只能在之后慢慢往上面添加了。

效果图

放大后的邮件内容，可以拖放

后话

之后会实现邮件内容的手势缩放的功能，目前通过单击按钮实现的也是最简单的。

[css]通过transform缩放邮件客户端h5页面的更多相关文章

  1. [Js/Jquery]Jquery tagsinput在h5邮件客户端中应用

    摘要 最近一直在折腾邮件的h5应用,为了保证在pc,ios,android端都可以使用,所以使用H5页面的方式嵌入app的webview中. 页面 UI大概是这样的 Jquery tagsinput下 ...

  2. iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent

    公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...

  3. H5页面手机端禁止缩放的正确方式

    H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-s ...

  4. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  5. 客户端相关知识学习（四）之H5页面如何嵌套到APP中

    Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...

  6. 客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项

    混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  9. 解惑好文：移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

随机推荐

  1. Hive 窗口函数、分析函数

    1 分析函数:用于等级.百分点.n分片等 Ntile 是Hive很强大的一个分析函数. 可以看成是:它把有序的数据集合 平均分配 到 指定的数量(num)个桶中, 将桶号分配给每一行.如果不能平均分配 ...

  2. ubuntu16.04安装重启后显示黑屏

    环境 华硕笔记本 ubuntu16.04系统 Nvidia GTX970显卡 问题 装好ubuntu后提示重启,重启后直接黑屏 方法 开机grub界面按e键,linux打头的行,quiet后添加nom ...

  3. 【BZOJ-4422】Cow Confinement 线段树 + 扫描线 + 差分 （优化DP）

    4422: [Cerc2015]Cow Confinement Time Limit: 50 Sec  Memory Limit: 512 MBSubmit: 61  Solved: 26[Submi ...

  4. 【GCJ2008E】日程表 最小割

    Google Code Jam 2008 E 日程表 [题目描述] 热情的选手Sphinny正在看新一年的日程表,并发现已经安排了很多编 程竞赛.她将这一年的每一天都用以下三种方式之一在日程表上打标记 ...

  5. bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  6. 前端rem单位的使用研究

    分析网易新闻手机web端,http://3g.163.com/,发现里面大量使用了rem这个单位进行计算大小. 针对rem这个单位有如下解析: px:像素是相对于显示器屏幕分辨率而言的相对长度单位.p ...

  7. JDK与Java SE/EE/ME的区别

    1. Java SE(Java Platform,Standard Edition). Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用 ...

  8. Uva11374 Airport Express

    最短路问题. 从起点和终点开始各跑一次dijkstra,可以得到起点.终点到任意点的距离.枚举使用的商业线路,找最优解. 破题卡输出,记录前驱和输出什么的仿佛比算法本身还麻烦. /*by Silver ...

  9. List排序和去重

    //去重和排序 List<SysResource> sortList = new ArrayList<SysResource>(); sortList.addAll(list) ...

  10. Visual Studio 2013小技巧

    Ctrl + F10 可以直接运行到光标处,而不用F10 逐过程 F11 逐语句了 当有多个断点时,按F5可以切换到下一个断点.