[css]通过transform缩放邮件客户端h5页面

摘要

最近一直在折腾邮件通知的东东，大概逻辑就是如果有新邮件，向收件人的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 + 1);
            int bodyStartIndex = html.IndexOf("<body");
            string htmlPart1 = html.Substring(0, bodyStartIndex);
            string htmlPart2 = html.Substring(bodyStartIndex);
            bodyStartIndex = htmlPart2.IndexOf("<body");
            int bodyEndIndex = htmlPart2.IndexOf(">", bodyStartIndex);
            html = htmlPart1 + htmlPart2.Substring(bodyEndIndex + 1);
            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,0,0,0.4);
            z-index: 99999;
            text-align: center;
            line-height: 50px;
        }

            .btn-zoom img {
                width: 55%;
                height: 55%;
            }

        .topdiv {
            padding-left: 12px;
            min-height: 700px;
            background-color: #fff;
            overflow: hidden;
        }

        .topdiv-zoom {
            overflow: auto;
            width: 100%;
            min-height: 1050px;
        }

        .email-content {
            margin-top: 12px;
            overflow: hidden;
            display: inline-block;
            background-color: #fff;
            background-position: center top;
            background-size: 100%;
            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");
        };
    });