在 Outlook for android 中调整大小的 Html 电子邮件横幅图像 - Mailchimp
问题描述 投票：0回答：2
我为 mailchimp 制作了一个自定义的 html 电子邮件模板。它包含可以在经典活动编辑器中添加的可重复块。除 Outlook for android 外，所有电子邮件客户端都运行良好。
我有 3 种内容块：
- Banner + Tekst（横幅全宽，横幅全宽下方的文字）
- 产品 + 产品（2 列，每列宽度的一半）
- 仅横幅（与 1 相同，但没有文本字段）
现在在 Outlook for android 上，如果我们添加产品 + 产品块，横幅块 Banner + Tekst 和 Banner Only 的图像将被调整为全宽度的 55%。如果我们只放置横幅块，则图像是全宽的。
我尝试了多个选项，比如固定 600px 宽度（邮件的全宽）和很多其他选项，现在花了 6 个多小时来修复它，但仍然没有变化。
内容块 1、2 和 3. （在带有完整模板的 jsfiddle 下方）
<!-- BEGIN BODY // -->
<tr>
<td valign="top" id="templateBody" width="600">
<!-- BEGIN CONTENTBLOK 01 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Banner + Text">
<tr>
<td valign="top" class="banner-img" width="100%" colspan="2">
<img src="https://richterio.nl/gw/promo-image.jpg" alt="" border="0" width="600" style="max-width:600px;width:600px;margin:0;padding:0;" height="300" class="templateImage" mc:label="Promo_Image" mc:allowdesigner="" mc:allowtext="" mc:hideable mc:edit="promo_image_1">
</td>
</tr>
<tr>
<td valign="top" class="contentblok_1_text_column" width="100%">
<!-- BEGIN MODULE: BODY CONTENT // -->
<div mc:hideable mc:edit="body_content">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p><strong>Getting started!</strong><br>To choose your fonts, colors, and styles, click <strong>Edit Design</strong> at the bottom of this screen. After you create a look and feel you love, click inside this box to start adding your own content.</p>
<p>Any time you create a layout here, you'll be able to find it in the <strong>Saved Templates</strong> tab on the <strong>Templates</strong> step. Then, you can reuse it as-is or quickly create new, similar versions for different types of messages.</p>
<p>Our <a href="https://templates.mailchimp.com/">Email Design Reference</a> can help you add content blocks to this template or show you how to design and code your own from scratch.</p>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0" align="center">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont green" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</div>
<!-- // END MODULE: BODY CONTENT -->
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 01 -->
<!-- BEGIN CONTENTBLOK 02 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Product + Product">
<tr>
<td valign="top" class="column1" style="max-width:282px;min-width:282px;" width="282">
<!-- BEGIN MODULE: PRODUCT CONTENT 02 PART 1 // -->
<div mc:hideable mc:edit="product_content_2_p1">
<table class="product_title" border="0" cellpadding="0" cellspacing="0" width="282">
<tr><td class="pad12 blue-light">
<h2>Gezond & Wel</h2>
<h1>Cranberry detox booster</h1>
<p>Goed voor de gal- en leverfunctie</p>
</td></tr>
</table>
</div>
<img src="https://richterio.nl/gw/product_blue.jpg" width="282" style="max-width:282px;width:282px;" class="templateImage" mc:label="Product Image" mc:allowdesigner="" mc:allowtext="" mc:edit="product_image_2_p1">
<div mc:hideable mc:edit="body_content_2_p1">
<table class="promo" border="0" cellpadding="0" cellspacing="0" width="282">
<tr>
<td class="pad12 blue">
<center>
<table cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<tr>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h2>KORTING</h2>
<table class="discount-s" cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<!-- Old Price/New Price 1 // -->
<tr><td>
<strong>Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 1 -->
<!-- Old Price/New Price 2 // -->
<tr><td>
<strong>
Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 2 -->
</tbody>
</table>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont pink" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</center>
</td>
</tr>
</table>
</div>
<!-- // END PRODUCT: PRODUCT CONTENT 02 PART 1 -->
</td>
<td valign="top" class="column2" style="max-width:282px;min-width:282px;" width="282">
<!-- BEGIN MODULE: PRODUCT CONTENT 02 PART 2 // -->
<div mc:edit="product_content_2_p2">
<table class="product_title" border="0" cellpadding="0" cellspacing="0" width="282">
<tr><td class="pad12 green-light">
<h2>Gezond & Wel</h2>
<h1>Cranberry detox booster</h1>
<p>Goed voor de gal- en leverfunctie</p>
</td></tr>
</table>
</div>
<img src="https://richterio.nl/gw/product_green.jpg" width="282" style="max-width:282px;width:282px;" class="templateImage" mc:label="Product Image" mc:allowdesigner="" mc:allowtext="" mc:edit="product_image_2_p2">
<div mc:hideable mc:edit="body_content_2_p2">
<table class="promo" border="0" cellpadding="0" cellspacing="0" width="282">
<tr>
<td class="pad12 green">
<center>
<table cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<tr>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h2>KORTING</h2>
<table class="discount-s" cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<!-- Old Price/New Price 1 // -->
<tr><td>
<strong>Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 1 -->
<!-- Old Price/New Price 2 // -->
<tr><td>
<strong>
Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 2 -->
</tbody>
</table>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont pink" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</center>
</td>
</tr>
</table>
</div>
<!-- // END PRODUCT: PRODUCT CONTENT 02 PART 2 -->
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 02 -->
<!-- BEGIN CONTENTBLOK 03 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Banner Only">
<tr>
<td valign="top" class="banner-img" width="600">
<img src="https://richterio.nl/gw/promo-image.jpg" width="600" style="max-width:600px;width:600px;margin:0;padding:0;" height="300" class="templateImage" mc:label="Promo_Image" mc:allowdesigner="" mc:allowtext="" mc:hideable mc:edit="promo_image_1">
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 03 -->
</td>
</tr>
完整的 html 电子邮件模板： https://jsfiddle.net/1bdrzhLf/
我尝试过的一些事情：
- Collspan="2" 在包含横幅 img 的 td 上
- 更多表格中的内容块内容
- Width="600" 而不是 width="100%"
2个回答
1
投票
投票
我没有尝试重现该问题，因为我想在尝试之前使用您的自定义 HTML 查看浏览器中发生了什么。当我减小屏幕尺寸时，我看到此代码没有响应的问题。
调试代码我可以看到您的两列结构具有固定宽度，不会针对较小的屏幕进行调整，因此仅此一项就会破坏您的模板。表格单元格/列不会自然堆叠。
您可以挤压这些列或堆叠它们，但如果您想堆叠它们，我建议将
<td><th><td><th>您可能需要对这两列中的文本应用字体粗细声明，以确保它不会显示为粗体，这是
<th>我还可以看到最顶部的标题图像没有应用“templateImage”类，因此也没有针对较小的屏幕进行调整。您还应该删除图像上的硬编码高度或调整/应用另一个类来自动输出高度。
现在，这些可能不仅仅是根本原因，但修复这些修复了我在浏览器中看到的问题，这可能会修复您最初发布的问题。
最终，应该首先修复浏览器中的任何响应问题。如果那里有问题，电子邮件客户端肯定会有问题。
1
投票
投票
这里的问题是你的模板没有完全响应。它仍然在几个地方设置了固定的桌面大小和布局。主要是：
- 大图（
和两个logo-header.jpg
）。promo-image.jpg - 两列。
第一个问题可以通过将相关的三个图像设置为
width:100%; max-width:600px;width:600px; max-width:600pxheight第二个问题可以通过在针对
@media.column1.column2@media (max-width:600px) {
.column1, .column2 { display:block !important; margin:auto !important; }
}
这是一个完整的代码版本，基于您的版本并应用了这些修复：https://parcel.io/e/556fddfc-6a83-4b8f-b3ec-68acf8867fe7?
这里是在这些修复之前和之后在 Acid 上对电子邮件的测试：
最新问题
- 无法在Android模拟器上运行Flutter应用程序-看不懂日志
- 添加/删除时反应图像上传重新渲染上传的图像
- 如何为 TYPO3 后端中的默认文本/媒体内容元素分配预览模板？
- NestJS Mongoose populate() 不适用于 ObjectId 数组，但适用于单个 ObjectId
- 使用 angularx-social-login 进行 Angular google 自动登录
- Jenkins cleanWs 插件未根据模式保存文件
- lua类构造函数中的本地对象？
- 有没有办法重新连接到断开的 VS Code 远程 SSH 连接？
- Redis 与 RocksDB
- 什么时候应该使用MySQL压缩协议？
- react 如何在不使用“`”符号的情况下允许多行返回？
- 在C#中动态添加和加载资源中的图像
- 使用 Turbo Native Android 播放背景音频
- Python：使用 Selenium/BS4 抓取使用脚本填充的画布
- 为什么不同版本的intern方法有变化？
- 无法使用凭据从 Spring Boot 应用程序连接到 Neo4J 数据库
- Google 是否可以看到通过 Google 跟踪代码管理器发送的数据？
- Powershell - XML 根据子节点值重命名节点名称
- 优化 SQL 查询流程
- 如何在 JavaFX 中使用不确定的 ProgressIndicator 来制作可暂停任务？
© www.soinside.com 2019 - 2024. All rights reserved.