我一直在尝试使电子邮件布局全宽。
我试过了:
- 把每个表格和正文,html放在宽度:100%最大宽度:100%;最小宽度:100%;.
- 还尝试将最大宽度和最小宽度设置为我的iPhone 7的宽度大小。
- 尝试将我的身体更改为位置:绝对或固定。
- 还尝试添加
<meta>
.
在Stack Overflow和其他网站上阅读有关它的所有内容。
我该如何解决这个问题?
<!DOCTYPE html>
<html>
<head>
</head>
<body class="body">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#FFFFFF;" bgcolor="#71aee8">
<tr>
<td>
<b>Email test</b>
</td>
</tr>
</table>
</body>
</html>
上面的电子邮件布局返回一个蓝色表格,但我似乎无法使其全宽。
需要它在Outlook应用程序和Gmail应用程序IOS上运行。在我的iPhone邮件应用程序上,它确实可以使其全宽。
有时元素的宽度将取决于其中的内容。也就是说,即使宽度设置为 100%,如果 100% 是 200px 宽,它只会填充 200px。因此,请确保您有足够的内容来填充测试中的页面。
对于适用于所有电子邮件客户端的 100% 宽度:
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#eaeaeb;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#eaeaeb;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" bgcolor="#eaeaeb" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- CONTENT HERE -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</center>
<!-- END OUTER WRAPPER -->
</body>