我正在制作一封 HTML 电子邮件，以便在人们使用联系表单时从我的网站发送，并且通过我所做的所有测试，我已经设法消除了许多错误，但尽管进行了多次尝试并进行了大量搜索，我似乎无法让我的电子邮件在 iPhone 上占据 100% 的宽度。
这是问题的屏幕截图:http://i62.tinypic.com/2r6mh5y.png
这是我正在使用的代码的副本:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<title></title>
<style type="text/css">
html, body { width: 100% !important; }
p { font-family: Arial; }
a { font-family: Arial; }
td { font-family: Arial; }
</style>
</head>
<body bgcolor="#000000" style="font-family:Arial; min-width:100%; background-color:#000000; margin:0; padding:0;" topmargin="0">
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/top_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="130" align="center" valign="middle">
<img src="http://newsite.moninfolettre.ca/images/courriel/logo_courriel.png" alt="Geant du web - Infolettre" width="168" height="61" style="font-size:18px; font-family:Arial; color:#FFFFFF;" />
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#CD0C11" style="width:100%; background-color:#CD0C11" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="4" style="font-size:1px;-webkit-text-adjust:none;"> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-image:url(http://newsite.moninfolettre.ca/images/courriel/shadow.jpg); background-position:center top; background-repeat:repeat no-repeat; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520">
<table>
<tr>
<td style="font-size:32px; padding:20px 0 0; white-space:nowrap;">Votre transaction est</td>
</tr>
<tr>
<td style="font-size:32px; font-weight:900; color:#E30512; padding:0 0 15px; white-space:nowrap;">
complétée avec succès !!
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#FFFFFF" style="width:100%; background-color:#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520" style="padding:20px 0 0; color:#5A5A5A">
<p style="margin:0 0 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p style="margin:20px 0;">Praesent nulla felis, malesuada eu sapien vitae, pretium dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam faucibus dui in est euismod, at sollicitudin elit aliquam. Nulla augue ante, tincidunt vel sodales id, tincidunt non nibh.</p>
<p style="margin:20px 0;">In hac habitasse platea dictumst. Aliquam feugiat aliquam tortor, id vestibulum dui rutrum vel. Nulla tincidunt, tortor vitae iaculis scelerisque, ipsum augue gravida ipsum, ac faucibus mauris urna et tortor.</p>
<p style="margin:20px 0;">Duis luctus pretium turpis, sed iaculis mauris commodo at. Aliquam dictum venenatis enim et tincidunt. In hac habitasse platea dictumst. Sed viverra laoreet neque, vel sodales tellus luctus vitae.</p>
<p style="margin:20px 0;">Merci d'avoir fait confiance à <strong style="font-weight:900;">GÉANT DU WEB !</strong></p>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40"> </td>
<td width="260" style="padding:30px 0 20px;">
<table>
<tr>
<td style="padding:0 0 10px;">Accèdez dès maintenant à</td>
</tr>
<tr>
<td>
<table width="165" height="35" bgcolor="#E30512" style="width:165px; background-color:#E30512; border-radius:10px;">
<tr>
<td align="center" valign="middle" style="font-size:14px; font-weight:900; text-transform:uppercase;">
<a href="#" style="text-decoration:none; color:#FFFFFF;">Votre compte</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:20px 0 10px;">ou contactez notre équipe:</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Sans frais</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 10px;">1-888-86-GÉANT</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Montréal</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 20px;">(514) 359-2949</td>
</tr>
<tr>
<td>Besoin de <a href="#" style="font-weight:bold; color:#000000;">Support en ligne</a> ?</td>
</tr>
</table>
</td>
<td width="300" valign="bottom" style="padding:0px;">
<img src="http://newsite.moninfolettre.ca/images/courriel/robot.jpg" alt="" style="display:block;" width="300" height="280" />
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/bottom_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="100" align="center" valign="middle">
<a href="www.moninfolettre.ca" style="font-size:24px; text-decoration:none; text-transform:uppercase; color:#FFFFFF;">
<span style="color:#FFFFFF;">www.moninfolettre.ca</span>
</a>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
最佳答案
任何你想要宽度为 100% 的元素，添加一个额外的基于像素的 min-width
例如:
width: 100%;
min-width: 600px;
或内联 <table style="min-width: 600px; width: 100%;" width="100%">
为了额外的保证，我将 width 属性加倍。你永远不知道... :)
关于html - iPhone 电子邮件上的 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23784472/