我正在尝试为 Outlook 2013 创建响应式HTML电子邮件，但我无法尝试让电子邮件符合我设置的宽度限制（即width =“100％” ）。实际宽度确实被设置为100％，直到我达到一定的较小宽度，此时我必须滚动查看信息。
代码在IE中工作正常（毫不奇怪）所以我知道代码本身至少在这个意义上是合适的（即我没有错误地包装）。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
@media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
<a href="#" style="text-decoration: none; color: #fff;">Home</a> | <a href="#" style="text-decoration: none; color: #fff;">News</a> | <a href="#" style="text-decoration: none; color: #fff;">Events</a> | <a href="#" style="text-decoration: none; color: #fff;">Applications</a> | <a href="#" style="text-decoration: none; color: #fff;">OrgChart</a>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
<a href="#" style="text-decoration: none; color: #004467; font-size: 32px; font-weight: normal; font-family:'Franklin Gothic', sans-serif">Title</a>
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
<a href="#" style="font-size:18px; text-decoration: none;font-family: 'Franklin Gothic', sans-serif;">Place of Work</a><br>
Jacob Johnson<br>
Work Role<br>
<a href="mailto:me@me.com">jacobjohnson@me.com</a><br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
回顾：我的电子邮件超出了我设置的宽度限制，我无法弄清楚原因。展望是我的屁股的痛苦。
答案 0 :(得分：0)
Outlook尚未破解，您的代码几乎在每个电子邮件客户端中都表现出相同的行为。
问题是您将所有表设置为宽度为100％。在其中许多中，您添加了类.deviceWidth，您可以在其中指定媒体查询中的宽度，但不能指定宽度超过640px的任何内容。 Outlook不支持@media查询。
尝试在媒体查询之外的样式表中添加.deviceWidth {width:440px!important; padding:0;}，并在每个表格中找到width="100%"。
JSFiddle现在不适合我，所以我不能给你看样品。
祝你好运。答案 1 :(得分：0)
Outlook并不尊重100％宽度，因此您需要为outlook设置固定宽度，为包装表添加宽度
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
对所有其他人使用类设置宽度为100％。在声明结尾处使用！important来覆盖内联css。
table.for_others {width: 100% !important;}