我正在为客户开发一个电子邮件/html模板,我们希望在尽可能多的客户端上呈现尽可能好。
我最初的问题是Gmail应用程序正在渲染移动版本,我花了一些时间来尝试解决许多问题,但最终我放置了一个最小宽度为610px的隐藏td,以强制Gmail应用程序渲染桌面版本。我知道这是一个快速修复,但我发现尝试解决 Gmail 应用程序呈现我的模板的桌面版本时遇到的许多问题太耗时了。
我用来强制 Gmail 应用呈现桌面版本的代码块示例。
<!--GMAIL APP FIX [START]-->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="610px" class="responsive-table gmail-hide" style="text-decoration: none; border: 0px solid white;">
<tr>
<td cellpadding="0" cellspacing="0" border="0" style="background-color:white; line-height:2px;" height="2px; min-width: 610px;">
<img src="#" height="2px" width="610px" style="max-height:2px; min-height:2px; display:block; width:610px; min-width:610px;" />
</td>
</tr>
</table>
<!--GMAIL APP FIX [END]-->
当Gmail渲染移动版本时,我遇到的问题很多。最重要的是对齐问题和填充。我有一个两列布局,在移动版本中,我的条件 css 没有生效,因为它们已被 gmail 条纹化。所以我真的看不出如何仅使用内联 css 以简单的方式解决此问题。
现在我发现我在Gmail收件箱中遇到了同样的问题。据我了解,Gmail的收件箱是相当新的,在搜索webb时,我发现很少或没有文章描述这个新客户端/应用程序的一些方法。
我正在寻找一种方法,如果可能的话,强制Gmail的收件箱呈现桌面版本。就像我目前为Gmail应用程序所做的那样。但也许这是不可能的?
由于Gmail的收件箱是安静的,这是我在网上找到的关于Gmail收件箱的唯一值得注意的链接:
https://litmus.com/blog/a-first-look-at-inbox-by-gmail-what-email-marketers-need-to-know
https://litmus.com/community/code/787-email-rendering-in-new-gmail-inbox-app
感谢答案。
我发现的最简单和最简单的解决方案是定义一个内联font-size
,并将其标记为!important
。否则,Gmail会自行调整字体大小多达50%!
源:
http://css-tricks.com/override-gmail-mobile-optimized-email