摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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. GC基本算法及C++GC机制

    前言 垃圾收集器是一种动态存储分配器,它自动释放程序不再需要的已分配的块,这些块也称为垃圾.在程序员看来,垃圾就是不再被引用的对象.自动回收垃圾的过程则称为垃圾收集(garbage collectio ...

  2. Spark Shell & Spark submit

    Spark 的 shell 是一个强大的交互式数据分析工具. 1. 搭建Spark 2. 两个目录下面有可执行文件: bin  包含spark-shell 和 spark-submit sbin 包含 ...

  3. UVa 11384 Help is needed for Dexter

    分析题目以后得出,对于一个连续等差递增的序列,例如1,2,3,4,5,6,每次选择其中后一半,减去能减的最大数,则是最优操作. 上述序列经过一次操作后变为1,2,3,0,1,2,此时可抛弃后一半(已经 ...

  4. Guava的异常工具类--Throwables

    Guava为我们提供了一个非常方便并且实用的异常处理工具类:Throwables类. 这个类的API可以参见:http://docs.guava-libraries.googlecode.com/gi ...

  5. 强连通分量的Tarjan算法

    资料参考 Tarjan算法寻找有向图的强连通分量 基于强联通的tarjan算法详解 有向图强连通分量的Tarjan算法 处理SCC(强连通分量问题)的Tarjan算法 强连通分量的三种算法分析 Tar ...

  6. python json.dumps() json.dump()的区别

    以前写的很简单,只有几句话,最近发现本文是本博客阅读量最大的一篇文章,觉得这样有种把人骗进来的感觉,于是又细化了一些.如果还有不好的地方,欢迎指出. 首先说明基本功能: dumps是将dict转化成s ...

  7. 网络存储（二）之ISCSI原理

    组成 一个简单ISCSI系统大致由以下部分构成 ISCSI Initiator 或者 ISCSI HBA ISCSI Target 以太网交换机 一台或者多台服务器 结构图如下: iscsi服务器用来 ...

  8. Mysql事务，并发问题，锁机制

    .什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约束 ...

  9. easyUI-combotree的本地数据导入

    一.页面内容: <div style="margin:10px 0"> <a href="javascript:void(0)" class= ...

  10. Bootstrap基本类和组件学习二

    一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...