1

我的客户希望我构建一个具有动态区域的响应式电子邮件模板，该模板将根据用于查看电子邮件的操作系统（针对 iOS、Android 和桌面）提供不同的横幅。

我知道，如果我在我的电子邮件中使用一些 JavaScript，我会冒着电子邮件应用程序将电子邮件视为垃圾邮件的风险。如果风险太高，这不是一个选择。

谁能给我一个清晰的见解或链接来帮助我实现这一目标？

4

3 回答 3

1

无法检查电子邮件中的所有操作系统，因为它涉及的不仅仅是 HTML/CSS。但是，您可以使用每个客户端和媒体查询的 CSS 限制来显示或隐藏不同的内容。

除了隐藏/显示移动与桌面的 hmhcreative 示例之外，此线程对于仅向 mac 客户端显示内容可能很有用。

通过一些巧妙的媒体查询，您可以为桌面显示一个广告，为仅适用于 Mac 的便携式设备显示另一个广告，并为其他所有内容显示默认值。不是一个完整的解决方案，但它很接近。

于 2013-05-29T17:49:42.830 回答
1

希望这个可以提供帮助。基本上它使用媒体查询来隐藏桌面版横幅并显示移动版横幅。

HTML：

<!--FOR DESKTOP-->
<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
    <tr>
        <td><a href="#"><img style="display:block;" src="[path]/image-desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
    </tr>
</table>
<!--//FOR DESKTOP-->

<!--FOR MOBILE-->
<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
    <table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
        <tr>
            <td><a href="#"><img style="display:block;" src="[path]/image-mobile.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
        </tr>
    </table>
</div>
<!--//FOR MOBILE-->

CSS：

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
    display: block !important;
    width: 100% !important;
    max-height: inherit !important;
    overflow: visible !important;
}

table[class=notmobile] {
    display: none !important;
}

table[class=table_for_mobile] {
    display: block !important;
}
}
于 2013-05-29T15:22:06.313 回答
0 
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
display: block !important;
width: 100% !important;
max-height: inherit !important;
overflow: visible !important;
}

table[class=notmobile] {
display: none !important;
}

table[class=table_for_mobile] {
display: block !important;
}
.div_for_mobile .table_for_mobile tr :nth-child(2n){ display:none}
.div_for_mobile .table_for_mobile tr :nth-child(3n){ display:block!important;}
}
</style>
</head>
<body>

对于桌面，

<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
    <td><a href="#"><img style="display:block;" src="img/desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
 </tr>
 </table>

对于移动设备，请使用：

<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
 <table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
    <tr>
        <td></td>
        <td><a href="#"><img style="display:block;" src="img/android-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
        <td style="display:none"><a href="#"><img style="display:block;" src="img/ios-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
    </tr>
</table>
</div>
于 2013-08-07T15:15:22.067 回答