我已经完成了我的邮件模板，它几乎适用于所有设备。
测试于：
邮件 Mac
Gmail mac
Gmail 窗口
展望窗口
但是在iPhone默认邮件应用程序上，html并没有覆盖所有空间。这是我的 html：
<!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 name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table cellpadding="0" cellspacing="0" style="min-width: 600px; width: 100%;" width="100%" align="center" bgcolor="#000000">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="500" align="center" bgcolor="#000000">
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/logo.png" style="display: block" width="300" alt="logo.png">
</td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td align="center">
<h2 style="margin-bottom: 0"><i><font face="Helvetica, Arial" color="#FFFFFF">LA TUA PRIMA CONSEGNA È OMAGGIO!</font></i></h2>
<font face="Helvetica, Arial" color="#FFFFFF">
(Per usufruire dell'offerta, scrivere nelle "Informazione Aggiuntive" del form "MAIL OMAGGIO")
</font>
</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<font face="Helvetica, Arial" color="#000000" size="2">
<a href="http://www.bicicouriers.it/" style="display:inline-block;background:#FFF;text-decoration:none;padding:15px;color:#000;">
<b>PRENOTA ORA</b>
</a>
</font>
</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png">
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pic.jpg" style="display: block" alt="pic.jpg">
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
<tr>
<td width="15"></td>
<td align="left" width="60%" valign="top">
<font face="Helvetica, Arial" color="#FFFFFF">
Bici Couriers è un servizio di consegna in bicicletta.
</font>
</td>
<td width="15"></td>
<td align="left">
<font face="Helvetica, Arial" color="#FFFFFF">
Consegniamo per voi in tutta Milano e Hinterland le vostre buste, plichi, pacchi, documenti, inviti, libri, fiori, ecc.
</font>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center">
<h2 style="margin-bottom: 0"><i><font face="Helvetica, Arial" color="#FFFFFF">SERVIZI SPECIALI</font></i></h2>
<font face="Helvetica, Arial" color="#FFFFFF">
Al di fuori delle consegne express, offriamo servizi e prezzi speciali per i nostri partners. Se possiedi un’attività locale e necessiti di un servizio di consegne contattaci ed insieme troveremo la soluzione ideale per te!
</font>
</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<font face="Helvetica, Arial" color="#000000" size="2">
<a href="http://www.bicicouriers.it/" style="display:inline-block;background:#FFF;text-decoration:none;padding:15px;color:#000;">
<b>SCOPRI DI PIÙ</b>
</a>
</font>
</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/rist.png" style="display: block" alt="Ristoranti">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">RISTORANTI</font></i></h2>
<p style="padding: 0 15px">
<font face="Helvetica, Arial" color="#FFFFFF">
I tuoi prodotti arriveranno sempre in tempo e alla giusta temperatura. Grazie al team di corrieri messi a tua disposizione, i tuoi clienti riceveranno un servizio di qualità superiore.
</font>
</p>
</td>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/neg.png" style="display: block" alt="Negozi">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">NEGOZI</font></i></h2>
<p style="padding: 0 15px">
<font face="Helvetica, Arial" color="#FFFFFF">
Se gestisci uno o più negozi, ti offriamo un servizio di consegne da un punto vendita all'altro o che dal negozio arrivino direttamente a casa dei tuoi clienti.
</font>
</p>
</td>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/ev.png" style="display: block" alt="Eventi">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">EVENTI</font></i></h2>
<p style="padding: 0 15px">
<font face="Helvetica, Arial" color="#FFFFFF">
Stai organizzando un evento, un matrimonio o una festa? Ci occuperemo di consegnare gli inviti ai tuoi ospiti e di recapitare al luogo dell’evento tutto quello di cui hai bisogno.
</font>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td height="1" bgcolor="#ffffff"></td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100" bgcolor="#000000">
<tr>
<td width="50" align="center">
<a href="https://www.facebook.com/Bici-Couriers-239393376166297">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/fb.png" style="display: block" width="24" alt="fb.png"></a>
</td>
<td width="50" align="center">
<a href="https://www.instagram.com/bicicouriers/">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/inst.png" style="display: block" width="24" alt="inst.png"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td align="center">
<p style="margin: 0">
<font face="Helvetica, Arial" color="#FFFFFF" size="2">
© 2016, Bicicouriers<br>
P. IVA : 08767440962
</font>
</p>
</td>
</tr>
<tr>
<td height="15"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我尝试在"容器"表上添加视口，内联样式，但没有任何反应。
少了点什么？
我应用了一个基本的帮助电子邮件模板，该模板适用于几乎所有在线和离线的电子邮件程序。 试试这个，让我知道。 :)
编辑：尽量避免在<p>选择上添加边距和填充之类的内容，它们不适用于每个电子邮件客户端。Mac超级宽容，但Outlook是地狱，Gmail是它自己的一系列问题。
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>BICICouriers - Milano</title>
<style type="text/css">
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: collapse!important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
@media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=noborder]{
border: none !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#000000" style="padding: 0 !important; margin:0 !important;">
<center>
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="520">
<tr>
<td width="518">
<!--CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" width="500" align="center" bgcolor="#000000">
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/logo.png" style="display: block" width="300" alt="logo.png" class="halfwidth">
</td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png" class="halfwidth">
</td>
</tr>
<tr><td height="20" style="line-height: 20px;"> </td></tr>
<tr>
<td align="center">
<h2 style="margin-bottom: 0"><i><font face="Helvetica, Arial" color="#FFFFFF">LA TUA PRIMA CONSEGNA È OMAGGIO!</font></i></h2>
<font face="Helvetica, Arial" color="#FFFFFF" style="line-height: 24px; font-size: 14px;">
(Per usufruire dell'offerta, scrivere nelle "Informazione Aggiuntive" del form "MAIL OMAGGIO")</font>
</td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td align="center">
<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bicicouriers.it/" style="height:60px;v-text-anchor:middle;width:150px;" stroke="f" fillcolor="#FFFFFF">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bicicouriers.it/"
style="background-color:#FFFFFF;color:#000000;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">PRENOTA ORA</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>
</td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png" class="halfwidth">
</td>
</tr>
<tr><td height="10" style="line-height: 10px;"> </td></tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pic.jpg" style="display: block" alt="pic.jpg" class="fullwidth">
</td>
</tr>
<tr><td height="10" style="line-height: 10px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100%" class="content" border="0">
<tr>
<td width="15" height="15" style="line-height: 15px; width: 15px !important;" class="fullwidth"></td>
<td align="left" width="60%" valign="top" class="fullwidth">
<font face="Helvetica, Arial" color="#FFFFFF">
Bici Couriers è un servizio di consegna in bicicletta.
</font>
</td>
<td width="15" height="15" style="line-height: 15px; width: 15px !important;" class="fullwidth"></td>
<td align="left" class="fullwidth">
<font face="Helvetica, Arial" color="#FFFFFF">
Consegniamo per voi in tutta Milano e Hinterland le vostre buste, plichi, pacchi, documenti, inviti, libri, fiori, ecc.
</font>
</td>
<td width="15" height="15" style="line-height: 15px; width: 15px !important;" class="fullwidth"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/pallozzi.png" style="display: block" width="350" alt="pallozzi.png">
</td>
</tr>
<tr>
<td align="center">
<h2 style="margin-bottom: 0"><i><font face="Helvetica, Arial" color="#FFFFFF">SERVIZI SPECIALI</font></i></h2>
<font face="Helvetica, Arial" color="#FFFFFF" style="line-height: 24px; font-size: 14px;">
Al di fuori delle consegne express, offriamo servizi e prezzi speciali per i nostri partners. Se possiedi un'attività locale e necessiti di un servizio di consegne contattaci ed insieme troveremo la soluzione ideale per te!
</font>
</td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td align="center">
<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bicicouriers.it/" style="height:60px;v-text-anchor:middle;width:150px;" stroke="f" fillcolor="#FFFFFF">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bicicouriers.it/"
style="background-color:#FFFFFF;color:#000000;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">SCORPI DI PIÙ</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>
</td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" border="0" class="content">
<tr>
<td align="center" class="fullwidth">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/rist.png" style="display: block" alt="Ristoranti">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">RISTORANTI</font></i></h2>
<p style="font-size: 10px; line-height: 15px !important;"></p>
<p><font face="Helvetica, Arial" color="#FFFFFF">I tuoi prodotti arriveranno sempre in tempo e alla giusta temperatura. Grazie al team di corrieri messi a tua disposizione, i tuoi clienti riceveranno un servizio di qualità superiore.</font></p>
<p style="font-size: 10px; line-height: 15px !important;"></p>
</td>
<td width="15" style="width: 15px !important; height: 15px !important;" class="fullwidth" height="15"> </td>
<td align="center" class="fullwidth">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/neg.png" style="display: block" alt="Negozi" class="fullwidth">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">NEGOZI</font></i></h2>
<p style="font-size: 10px; line-height: 15px !important;"></p>
<p><font face="Helvetica, Arial" color="#FFFFFF">Se gestisci uno o più negozi, ti offriamo un servizio di consegne da un punto vendita all'altro o che dal negozio arrivino direttamente a casa dei tuoi clienti.</font></p>
<p style="font-size: 10px; line-height: 15px !important;"></p>
</td>
<td width="15" style="width: 15px !important; height: 15px !important;" class="fullwidth" height="15"> </td>
<td align="center" class="fullwidth">
<img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/ev.png" style="display: block" alt="Eventi">
<h2><i><font face="Helvetica, Arial" color="#FFFFFF">EVENTI</font></i></h2>
<p style="font-size: 10px; line-height: 15px !important;"></p>
<p><font face="Helvetica, Arial" color="#FFFFFF">Stai organizzando un evento, un matrimonio o una festa? Ci occuperemo di consegnare gli inviti ai tuoi ospiti e di recapitare al luogo dell'evento tutto quello di cui hai bisogno.</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td height="1" bgcolor="#ffffff" style="line-height: 1px; background-color: #ffffff"></td>
</tr>
<tr><td height="30" style="line-height: 30px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100" border="0">
<tr>
<td width="50" align="center">
<a href="https://www.facebook.com/Bici-Couriers-239393376166297"><img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/fb.png" style="display: block" width="24" alt="fb.png"></a>
</td>
<td width="50" align="center">
<a href="https://www.instagram.com/bicicouriers/"><img src="http://bicicouriers.com/application/themes/bicicouriers/assets/img/dem/inst.png" style="display: block" width="24" alt="inst.png"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15" style="line-height: 15px;"> </td></tr>
<tr>
<td align="center">
<p><font face="Helvetica, Arial" color="#FFFFFF" size="2">
© 2016, Bicicouriers<br>
P. IVA : 08767440962</font></p>
</td>
</tr>
<tr><td height="15" style="line-height: 15px;"> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>