电子邮件Blast HTML大小调整问题

时间:2017-08-08 20:35:58

标签: html css asp.net html-email mail-server

所以我有一个我正在构建的电子邮件爆炸,并且对于特定于HTML的电子邮件爆炸是相当新的,我的图像和链接正常工作但我的问题是在手机上查看爆炸我试图嵌入的媒体查询isn& #39;工作。

我使用ASP.NET和HTML来执行爆炸。但是我担心我可能包含太多的css或者不足以根据屏幕调整身体的大小。

如果有人可以查看我的代码并查看我可能出错的地方,我会感激。

     Dim emailmess As New MailMessage()
            emailmess.From = New MailAddress("example@example.com")
            emailmess.To.Add(New MailAddress("example@example.com"))
            emailmess.IsBodyHtml = True
            emailmess.Subject = "Aures Email Blast Test"
            emailmess.Body = "<html><head><style type='text/css'>@media screen and (max-width:600px){table[class='container-table'] {width: 100% !important;}}</style></head><body margin='0' padding='0'><table class='container-table' cellspacing='0' cellpadding='0' style='max-width: 600px; width:100%; height:100%; max-height: 800px;' background='http://www.becub3d.com/Aures_Eblast_F.png'><tr><td><table class='container-table' cellspacing='0' cellpadding='0' border='0' cellspacing='0' cellpadding='0' style='margin-top:107%; max-width:600px; height:9%; width:100%;' ><tr><td align='left' style='width:42px;'></td><td style='width:100px;cursor:pointer;' ><a href='https://www.aures.com/en/Contact/main-aures-contact' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a></td><td style='width:20px;'></td><td style='width:100px;cursor:pointer;' ><a href='https://www.youtube.com/watch?v=en_LPS_gfXY' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a></td><td style='width:20px;'></td><td style='width:100px;cursor:pointer;' ><a href='https://www.aures.com/en/point-of-sale-equipment-solutions-systems/yuno-touchscreen-terminal-multi-configuration' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a></td><td style='width:37px;'></td></tr></table><table class='container-table' cellspacing='0' cellpadding='0' width='600' height='30'><tr><td></td></tr></table><table class='container-table' cellspacing='0' cellpadding='0' width='600' height='10' border='0' cellspacing='0' cellpadding='0'><tr><td style='width:440px;'></td><td style='width:75px;cursor:pointer;' ><a href='www.auresusa.com' style='display:block; text-decoration:none;'>&nbsp;</a></td><td></td></tr></table><table class='container-table' cellspacing='0' cellpadding='0' width='600' height='16'><tr><td style='width:290px;'></td><td style='width:15px;cursor:pointer;' ><a href='https://www.linkedin.com/company/aures-technologies-inc' style='display:block; text-decoration:none;'>&nbsp;</a></td><td></td></tr></table></td></tr></table></body></html>"
            Dim thesmtp As New SmtpClient("webmail.example.com")
            thesmtp.Credentials = New System.Net.NetworkCredential("example@example.com", "password")
            thesmtp.Port = 25
            thesmtp.EnableSsl = False
            thesmtp.Send(emailmess)

以下HTML STRING BROKEN

<html>
<head>
    <style type='text/css'>@media screen and (max-width:600px){table[class='container-table'] {width: 100% !important;}}</style>
</head>
<body margin='0' padding='0'>
    <table class='container-table' cellspacing='0' cellpadding='0' style='max-width: 600px; width:100%; height:100%; max-height: 800px;' background='http://www.becub3d.com/Aures_Eblast_F.png'>
        <tr>
            <td>
                <table class='container-table' cellspacing='0' cellpadding='0' border='0' cellspacing='0' cellpadding='0' style='margin-top:107%; max-width:600px; height:9%; width:100%;' >
                    <tr>
                        <td align='left' style='width:42px;'></td>
                        <td style='width:100px;cursor:pointer;' >
                            <a href='https://www.aures.com/en/Contact/main-aures-contact' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a>
                        </td>
                        <td style='width:20px;'></td>
                        <td style='width:100px;cursor:pointer;' >
                            <a href='https://www.youtube.com/watch?v=en_LPS_gfXY' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a>
                        </td>
                        <td style='width:20px;'></td>
                        <td style='width:100px;cursor:pointer;' >
                            <a href='https://www.aures.com/en/point-of-sale-equipment-solutions-systems/yuno-touchscreen-terminal-multi-configuration' style='display:block; text-decoration:none; height:70px;'>&nbsp;</a></td><td style='width:37px;'>
                        </td>
                    </tr>
                </table>
                <table class='container-table' cellspacing='0' cellpadding='0' width='600' height='30'>
                    <tr>
                        <td></td>
                    </tr>
                </table>
                <table class='container-table' cellspacing='0' cellpadding='0' width='600' height='10' border='0' cellspacing='0' cellpadding='0'>
                    <tr>
                        <td style='width:440px;'></td>
                        <td style='width:75px;cursor:pointer;' >
                            <a href='www.auresusa.com' style='display:block; text-decoration:none;'>&nbsp;</a>
                        </td>
                        <td></td>
                    </tr>
                </table>
                <table class='container-table' cellspacing='0' cellpadding='0' width='600' height='16'>
                    <tr>
                        <td style='width:290px;'></td>
                        <td style='width:15px;cursor:pointer;' >
                            <a href='https://www.linkedin.com/company/aures-technologies-inc' style='display:block; text-decoration:none;'>&nbsp;</a>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body></html>

1 个答案:

答案 0 :(得分:1)

我查看了您的代码,我的答案基于此代码作为示例:

<table class='container-table' cellspacing='0' cellpadding='0' style='max-width: 600px; width:100%; height:100%; max-height: 800px;' background='http://www.becub3d.com/Aures_Eblast_F.png'>

您正在使用表格背景中的图像。背景图像不会调整大小,只是表格。图像通常保持相同的大小。

这还可以确保您的图像不会显示在Outlook中,而Outlook不支持背景图像。这就是为什么它在IOS设备上看起来很糟糕,而不是在Android上显示。

电子邮件的HTML与Web开发不同。它使用比HTML 5开发小得多的CSS代码库。它并不像你在现代浏览器中看到的那样支持相同的代码。实际上,Microsoft Outlook的呈现引擎基于Word。您应该查看Campaign Monitor CSS合规性表:

我可能会建议您查找一个有效的html响应式电子邮件模板,研究它如何处理图像并从那里开始。我建议像Zurb电子邮件基金会这样的东西:

祝你好运。