Html email looking different in Gmail app(在 Gmail 应用中看起来不同的 HTML 电子邮件)
问题描述
我不太习惯制作 html 电子邮件.当然，我必须开始在同一封电子邮件的两个版本中制作响应式邮件.当我以为我已经为大多数客户完成了它时，我意识到适用于 android 和 iOS 的 gmail 应用程序为电子邮件提供了第三种外观.我已经阅读了 gmail 删除了标题部分，但即使我尝试将其设置为内联 gmail 应用程序的样式，它仍然是第三个外观.下面评论中的图片链接显示了移动设备的外观和 gmail 应用程序的外观.问题是我有三列应该变成一列，将图像向左移动，标题和文本向右移动(如移动图像).Gmail 应用程序在每一行上显示图像、标题和文本.它应该 - 充其量 - 看起来像移动版，或者至少看起来像桌面版.
I'm not really used to making html emails. Of course I have to start out making a responsive one in basically two versions of the same email. When I thought I had it done for most clients I realised that gmail app for both android and iOS gave the email a third look. I have read the gmail strips out the header section but even if I try to style it inline gmail app still makes the third look. Links to images in comment below shows how mobile should look and gmail app look. The trouble is where I have three columns that should turn into one moving the image to the left and header and text to the right (like mobile image). Gmail app shows the image, header and text on each their line. It should - at best - look like the mobile or at least look like the desktop version.
感谢任何帮助.
谢谢
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
table td { border-collapse: collapse; }
h2, p {margin: 0;}
h2 {padding-top: 15px;}
.img, .text {display: block;}
body .deviceWidth {width: 680px}
@media only screen and (max-width: 640px) {
body .deviceWidth {width: 440px!important; padding:0;}
body .center {text-align: center!important;}
table.triplet {width: 99% !important; padding-bottom: 20px !important;}
.noPadding {padding-left: 0!important;}
.img, .text {width: 50%;}
.text p {padding-right: 20px;}
h2 {padding-top: 0!important;}
}
@media only screen and (max-width: 479px) {
body .deviceWidth {width: 300px!important; padding:0;}
body .center {text-align: center!important;}
.img img {width: 140px;}
}
</style>
<!-- Targeting Windows Mobile -->
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
<table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
<img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
<h1 align="left">Header 1</h1>
<p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding: 0;" width="700">
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 1</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 2</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 3</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
推荐答案
当你在表格上使用 align="left" 时，就像在 CSS 中向左浮动一样.这就是 Gmail 正在做的事情，它使您的文本表浮动，导致它在您的图像表下方溢出(弹出).
When you use align="left" on the tables, it is like floating left in CSS. This is what Gmail is doing, it is floating your text table, causing it to overflow (pop down) below your image table.
如果您希望表格中的文本对齐，请将其放在这些表格中的 <td> 中.
If you want your text within the tables to align, put it in the <td> within those tables instead.
更新:
要在 html 电子邮件中响应，请尝试使用 display:block; 切换技术:
For responsive in html email, try using the display:block; toggle technique:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
@media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="switch" width="50%">
<img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td class="switch" width="50%" valign="top" style="padding:30px;">
Text here...
</td>
</tr>
</table>
</body></html>
这将被 Gmail 忽略，因为它会去除样式标签，保留默认的非响应式布局.
This will be ignored by Gmail as it strips the style tag, leaving the default non-responsive layout.
这篇关于在 Gmail 应用中看起来不同的 HTML 电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本文标题为：在 Gmail 应用中看起来不同的 HTML 电子邮件
基础教程推荐
- Kivy Buildozer 无法构建 apk，命令失败:./distribute.sh -m “kivy"d 2022-01-01
- 当从同一个组件调用时，两个 IBAction 触发的顺序是什么? 2022-01-01
- android 应用程序已发布，但在 google play 中找不到 2022-01-01
- Android:对话框关闭而不调用关闭 2022-01-01
- 如何在 iPhone 上显示来自 API 的 HTML 文本? 2022-01-01
- 如何在 UIImageView 中异步加载图像? 2022-01-01
- 在 gmail 中为 ios 应用程序检索朋友的朋友 2022-01-01
- UIWebView 委托方法 shouldStartLoadWithRequest:在 WKWebView 中等效? 2022-01-01
- 如何让对象对 Cocos2D 中的触摸做出反应? 2022-01-01
- 如何在没有IB的情况下将2个按钮添加到右侧的UINavigationbar? 2022-01-01
