HTML 电子邮件大小调整 - Android答案

【问题标题】：HTML email sizing - AndroidHTML 电子邮件大小调整 - Android
【发布时间】：2014-12-12 13:30:51
【问题描述】：

我已经有多年没有创建过 HTML 电子邮件了，今天我面临着发出一封电子邮件的压力 - 以下是我的代码 - 我的问题是，当使用石蕊测试电子邮件时，它无法扩展 - 它显示为太大了 - 我错过了什么吗？

Lotus notes 7 中也有 - 文本布局被改写了 - 谁能给我一些快速提示！？

我的代码在下面 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ariston - Merry Christmas</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />






</head>

<body  bgcolor="#f4f2f2" style="margin:0; padding:0; border:0; width:100%; min-width:600px;" >
<div  style="background:#f4f2f2;">
<table border="0" cellpadding="0" cellspacing="0"   align="center" bgcolor="#f4f2f2" width="100%" >

                 <tr>
              <td  >

              <br/>
              </td>
                 </tr>
           <tr>
        <td bgcolor="#f4f2f2">
        <center>
         <table border="0" cellpadding="0" cellspacing="0"  width="600" align="center">

          <tr>
           <td>
            <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413"  alt="Merry Christmas from Ariston" />
            </td>
            <td>



            </td>
          </tr>
          <tr>
              <td bgcolor="#ac1022">
                <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacer1.gif" width="00" height="30"  />
              </td>
          </tr>
           <tr>
              <td  bgcolor="#ac1022" align="center" style="text-align:center;">
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr>

                        <td >
                            <table border="0" cellpadding="0" cellspacing="0" align="left">
                            <tr>
                              <td style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center" align="center">
                                WARM WISHES FROM ALL AT ARISTON.
                                    </td>

                            </tr>
                            <tr>
                                <td>
                                <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacerRed2.gif" width="24" height="18" />
                                </td>

                            </tr>

                                <tr>
                                    <td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:16px; text-align:center;" align="center">
                                      We’ve loved working with you this year.<br/>
 Have a wonderful festive season and a great new year.

                                </td>
                                </tr>
                                <tr>


                                    <td>
                                    <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hspace.gif" width="28" height="67" />

                                    </td>

                                </tr>


                                <tr>
                                <td style="text-align:center" align="center"><img src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/AristonRed.jpg" width="164"  height="38" alt="Ariston Logo" /></td>
                                </tr>






                          </table> 

                      </td>




                  </tr>
                </table>

              </td>
          </tr>
           <tr>
              <td  bgcolor="#ffffff" align="center" style="text-align:center;">
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr>

                        <td >
                            <table border="0" cellpadding="0" cellspacing="0" align="left">
                            <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10"  />


                                </td>



                            </tr>

                            <tr>
                              <td align="center" style="font-family: 'Arial', sans-serif; color:#ab162b; font-size:12px; text-align:center">
                                     Follow us on:


                                </td>



                            </tr>
                            <tr>
                                <td align="center" align="center" style="text-align:center;">
                                <table align="center" style="text-align:center; width:100px;">
                                     <tr >
                                    <td><a href="https://twitter.com/aristonuk"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/twitterIco.gif" width="33" height="28" alt="Twitter" /></a></td>
                                        <td><a href="https://www.facebook.com/AristonUK"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/fbIco.gif" width="33" height="28" alt="Facebook" /></a></td>
                                        <td> <a href="https://www.youtube.com/user/Aristonthermo"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/youIco.gif" width="29" height="28" alt="YouTube" /></a></td>

                                    </tr>
                                </table>
                                </td>

                            </tr>

                             <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10"  />


                                </td>



                            </tr>

                                <tr>
                                    <td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:12px; text-align:center;" align="center">
                                      Ariston Thermo UK Ltd

                                </td>




                                </tr>

                                <tr>
                                 <td style="font-family: 'Arial', sans-serif; color:#707170; font-size:12px; text-align:center;" align="center">
                                      Artisan Building, Hillbottom Road, High Wycombe, HP12 4HJ

                                </td>
                                </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                <tr>


                                    <td align="center">
                                <a href="http://www.ariston.co.uk" style="color:#ab162b; font-weight:bold; text-decoration:none; font-size:18px; text-align:center;">www.ariston.co.uk</a>

                                    </td>

                                </tr>
                                <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                            <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>


                                <tr>
                                <td style="text-align:center" align="center">

                                     <img style="border:none;  text-align:center;" align="middle" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hwater.gif" width="280" height="40" alt="Hot Water, heating and renewables" />

                                </td>
                                </tr>






                          </table> 

                      </td>




                  </tr>
                </table>

              </td>
          </tr>










         </table>


        </center>
    </td>
</tr>

【问题讨论】：

仅供参考 <center> 作为一个元素已被弃用，不应再使用。

标签： android html css html-email

【解决方案1】：

为 Lotus Notes 收件人创建 HTML 邮件是一项挑战。 Notes 不能很好地将 HTML 转换为富文本。

对 body 元素试试这个——这会设置背景颜色（两次）并删除边距和填充：

<body bgcolor="#f4f2f2" style="background-color:#f4f2f2; margin:0; padding:0;">

对于表格，在 CSS 和旧版 HTML 中准确指定所有内容并没有什么坏处（Notes 仍然使用 <FONT> 标记！！）。

对于表格和图像行：

<table cellpadding="0" cellspacing="0" width="100%" 
       bgcolor="#f4f2f2" border="0" align="center" 
       style="border: 0px none; background-color:#f4f2f2">
  <tr style="margin: 0;">
    <td align="center" width="100%" valign="top">
      <table cellpadding="0" cellspacing="0" width="600" bgcolor="#f4f2f2" border="0" align="center" style="border: 0px none;">
        <tr style="margin: 0;">
          <td width="599" align="center" height="413" valign="bottom" style="text-align: center;">
            <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413"  border="0" alt="Merry Christmas from Ariston" />
          </td>   ...

请注意，对于 HTML 电子邮件，我在 <TD> 标记之间不包含任何回车——某些电子邮件系统会将 CR 读取为新行。为了方便查看，我在上面和下面添加了 CR。

对于文本单元格，最好包含在 <p> 元素中 - 对于 TD 元素，所有内容都应位于一行，但我添加了 CR 以便于查看：

<td>
  <p style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center"; padding:0; margin:0;">
    <b style="font-family: 'Arial Black', sans-serif; text-align:center;">
      WARM WISHES FROM ALL AT ARISTON.
    </b>
  </p>
</td>

为了加粗，我添加了<b> 元素并为其添加了字体样式——这是Notes 的一种解决方法。 ;-)

不确定你想要缩放什么——表格在你的代码（和我上面的代码）中固定为 600 像素，所以如果你想做一些响应式的东西，你将不得不摆弄它。我不会尝试对一刀切的电子邮件格式过于花哨。 ;-)

【讨论】：

【解决方案2】：

试着把它放在<head> 标签中

<meta name="HandheldFriendly" content="true" />

【讨论】：

它与图像的宽度大小有关吗？认为也许应该是响应式的，即宽度：自动高度：100％；？但不知道这是否会影响其他电子邮件客户端