摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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. 由多线程引起的map取值为null的分析

    昨天写了一个多线程的程序,却发现了一个很奇特的问题,就是我的map对象明明put了,可是get的时候竟然会取到null,而且尝试多次,有时候成功,有时候取到null,并不确定. 程序代码如下: pub ...

  2. UDP编程中client和server中使用recvfrom和sendto的区别

    client中:      sendto(sfd,buf,strlen(buf),0,(struct sockaddr *)&saddr,len);      recvfrom(sfd,buf ...

  3. 【BZOJ-3450】Tyvj1952Easy 概率与期望DP

    3450: Tyvj1952 Easy Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 468  Solved: 353[Submit][Status] ...

  4. 【BZOJ-1833】count数字计数 数位DP

    1833: [ZJOI2010]count 数字计数 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 2494  Solved: 1101[Submit][ ...

  5. bzoj1102: [POI2007]山峰和山谷Grz

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  6. 一款可以下拉搜索html下拉框控件

    直接上图,组件不错,支持静态和动态搜索,这个只是在原控件上自己修改样式后的,这里主要记录一下,在修改别人控件时,应该如何去封装代码: 原控件:http://ivaynberg.github.com/s ...

  7. Uva11538 排列组合水题

    画个图就很容易推出公式: 设mn=min(m,n),mx=max(m,n) 对角线上: 横向:m*C(n,2) 纵向:n*C(m,2) 因为所有的C函数都是只拿了两个,所以可以优化下.不过不优化也过了 ...

  8. Linux Dynamic Shared Library && LD Linker

    目录 . 动态链接的意义 . 地址无关代码: PIC . 延迟版定(PLT Procedure Linkage Table) . 动态链接相关结构 . 动态链接的步骤和实现 . Linux动态链接器实 ...

  9. C# ref的应用

    之前一直只是知道有这么个参数修饰符,也知道用来干嘛的,但是基本就没用上.这几天好好整理了一下,发现ref的修饰符可以帮助简化很多代码.让我更深入的了解到面向对象的深沉含义. 自定义一个类中,类中的方法 ...

  10. Sender

    多个对象用同一个方法的时候,想对多个对象分别操作的话就用Sender.  BackGroundWorker worker1 = sender as BackGroundWork.  分别去取当前的对象 ...