获取Android版Gmail应用来呈现我的HTML电子邮件？
[英]Getting Gmail app for Android to render my HTML email?
问题描述
I'm currently at a stand still and could really use some help. 
我目前处于停滞状态，可以真正使用一些帮助。 I'm coding an HTML email which is a first for me. 我正在编写HTML电子邮件，这对我来说是头一回。 I have a basic understanding of CSS and HTML, but I can't figure out for the life of me how to fix this Gmail problem, and I even know what the cause is. 我对CSS和HTML有了基本的了解，但是我一生都找不到解决该Gmail问题的方法，甚至不知道原因是什么。 It seems as though the problem is coming from the only editable text region, which is the address line (Hi [name],) and which is also the only row with multiple columns. 似乎问题出在唯一的可编辑文本区域，这是地址行（Hi [name]，），也是唯一具有多列的行。 It looks like the text isn't shrinking to fit the screen, causing the neighboring cells to go crazy and expand the picture. 文本似乎没有缩小到适合屏幕大小，导致相邻单元格发疯并扩大了图片。 It works great in every other ESP I tested it on, even Outlook. 它在我测试过的所有其他ESP（甚至Outlook）中都非常有效。 I attached a picture and my code. 我附上了图片和代码。 Please, if you have any advice or resources please help a noob in need. 请，如果您有任何建议或资源，请帮助有需要的菜鸟。
messed up version on Android Gmail app code Android Gmail应用程序 代码 上的混乱版本
<html>
<head>
<title>Tradeshow_email_PARTY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="line-height: 0pt; font-weight: bolder;"><font face="arial" size="2px" color="#636564">Hi [name],</font>
</td>
<td>
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
2 个解决方案
解决方案1
0 2014-04-11 16:07:33
You should nest your columns instead of colspanning it. 您应该嵌套列而不是将其合并。 Setting widths on the all table cells that are not 100% of the row is important also. 在不是行的100％的所有表单元格上设置宽度也很重要。 Example: 例：
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="47">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;">
Hi [name],
</td>
<td width="40">
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
You'll notice a few other small things I fixed up for you also. 您还会注意到我为您解决的其他一些小问题。 Ultimately though, you are using a lot of images in places where you shouldn't. 但最终，您会在不应使用的地方使用很多图像。 Your grey sides should be in html and so should all text from the red area down. 您的灰色面应为html，所有文本应从红色区域向下。
解决方案2
0 2014-05-15 13:44:58
This is my try based on above code: 这是我根据上面的代码尝试：
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td width="600" style="width:600px;min-width:600px;max-width:600px;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
<tr>
<td width="47" style="width:47px;;min-width:47px;padding:0px;margin:0px;">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block;min-width:47px;width:47px;" width="47" height="40" alt="">
</td>
<td width="123" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;width:123px;min-width:123px;">
Hi [name],
</td>
<td width="430" style="width:430px;min-width:430px;">
<img src="http://i.imgur.com/KUO971D.png" style="display:block;width:430px;min-width:430px;" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.