摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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. ajax请求web服务返回json格式

    由于.net frameword3.5以上添加了对contenttype的检查,当ajax发送请求时,如果设置了contenttype为json,那么请求webservice时,会自动将返回的内容转为 ...

  2. 快速提高 Xcode 编译速度的方法（转载自网上一个大神的方法）

    1.,中的 Debug Information Format 的选项中选择 DWARF ,平时调试就是用整个选项,经过测试,速度确实有很大的提升,等发行版本的时候在调回 DWARF with dsYM ...

  3. python 学习笔记6（数据库 sqlite）

    26. SQLite 轻量级的关系型数据库 SQLite是python自带的数据库,可以搭配python存储数据,开发网站等. 标准库中的 sqlite3 提供该数据库的接口. 1. 基本语法如下 c ...

  4. 3.Android 优化布局(解决TextView布局)

    转载:http://www.jianshu.com/p/d3027acf475a 今天分享一个Layout布局中的一个小技巧,希望看过之后你也可以写出性能更好的布局,我个人的目的是用最少的view写出 ...

  5. 7款应用最广泛的Linux桌面环境盘点

    转载:http://top.jobbole.com/34823/ 多样性应该是 Linux 最好的特性之一,用户可以不断尝试各种喜欢和新鲜玩法与花样,并从中找出最适合自己的应用.无论你是 Linux ...

  6. 【BZOJ-3786】星系探索 Splay + DFS序

    3786: 星系探索 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 647  Solved: 212[Submit][Status][Discuss] ...

  7. 【BZOJ-1096】仓库建设 斜率优化DP

    1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3719  Solved: 1633[Submit][Stat ...

  8. Android NDK学习之第一个实例---端口扫描

    为什么要写一个端口扫描的程序,Java来写不是很方便吗?因为我也没有想到什么例子能够方便的来练习.于是想到以前找到的端口扫描的C代码,于是想用他们来练习.扫描服务端端口的方式有许多种,最简单的就是直接 ...

  9. iOS - UITextfield 验证邮箱格式

    做登录界面时,用户在UITextfield中输入输入邮箱账号后,我们应该在本地验证格式是否正确,再将参数传给服务器验证. 最简单的就是利用系统的NSPredicate //利用正则表达式验证 -(BO ...

  10. HTTP,TCP/IP协议

    本文转自cnblogs:http://www.cnblogs.com/xhwy/archive/2012/03/03/2378293.html 一.概述 1.1 TCP   HTTP   UDP: 都 ...