摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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. 数组与指针-----a[i]=*(a+i)=i[a]

    #include<stdio.h> #include<stdlib.h> int main(void) { ,,,,};//a[i]相当于*(a+i) printf(]); p ...

  2. 普通用户安装 R 包

    转自 http://bnuzhutao.cn/archives/901 一般 R 语言的书籍上,介绍安装 R 包的方法都是这样的: install.packages("packagename ...

  3. Linux下安装与使用本地的perl模块

    转自 http://www.cnblogs.com/xianghang123/archive/2012/08/23/2652806.html Linux下安装与使用本地的perl模块 在使用Linux ...

  4. Leetcode 86. Unique Binary Search Trees

    本题利用BST的特性来用DP求解.由于BST的性质,所以root左子树的node全部<root.而右子树的node全部>root. 左子树 = [1, j-1], root = j, 右子 ...

  5. 【caffe】create_cifar10.sh在windows下解决方案

    @tags caffe python windows下配置caffe后,create_cifar10.sh无法执行,因为是shell脚本.那就看懂脚本意思,用python重写一个: # create_ ...

  6. Hdfs常用操作

    一.linux rm是删除,不是del 二.常用操作 package hdfs; import java.io.FileInputStream; import java.io.FileNotFound ...

  7. hdu5175 gcd 求约数

    题意:求满足条件GCD(N,M) = N XOR M的M的个数 sol:和uva那题挺像的.若gcd(a,b)=a xor b=c,则b=a-c 暴力枚举N的所有约数K,令M=NxorK,再判断gcd ...

  8. centos7 建立虚拟目录

    一.安装mysql,直接用yum安装即可,mysql在centos7.0版本中被mariadb替代了. 命令: yum install mysql-server mysql 安装好了,选择修改mysq ...

  9. C#调用c++的dll报错：“尝试读取或写入受保护的内存。这通常指示其他内存已损坏“

    一:c++代码内部报错引起.可能是空指针或者其他. 二:需要从c#代码调试进入c++代码.可以吧c++的dll和pdb拷入工程项目的debug目录下面. 三:我发现的错误时在C++内部声明啦全局变量, ...

  10. 我总结的js方面你可能不是特别清楚的小知识

    !!将一个值方便快速转化为布尔值 console.log( !!window===true ); 不声明第三个变量实现交换 var a=1,b=2; a=[b,b=a][0];//执行完这句代码之后 ...