所以我有一个我正在构建的电子邮件群发并且对 HTML 特定的电子邮件群发还很陌生，我的图像和链接工作正常但我的问题是在手机上查看群发时我尝试嵌入的媒体查询是'工作。
我正在使用 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;'> </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;'> </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;'> </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;'> </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;'> </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 字符串
<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;'> </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;'> </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;'> </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;'> </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;'> </a>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
最佳答案
我查看了您的代码，并以此代码为例给出我的答案:
<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 中。这就是为什么它在 IOS 设备上看起来很糟糕，而不是在 Android 上不显示的原因。
电子邮件的 HTML 与 Web 开发不同。它使用比 HTML 5 开发小得多的 CSS 代码库。它不像您在现代浏览器中看到的那样在任何地方都支持相同的代码。事实上，Microsoft Outlook 的呈现引擎是基于 Word 的。您应该查看 Campaign Monitor CSS 合规性表:
我可能会建议您查找有效的 html 响应式电子邮件模板，研究它如何处理图像并从那里着手。我建议像 Zurb Foundation for Emails 这样的东西:
祝你好运。
关于html - Email Blast HTML 大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45577595/