问题
我在Litmus测试了我的电子邮件，它只在iOS手机中呈现电子邮件窗口大小的一半，如here所示。听起来Apple在iOS 10中进行了此更新，因此用户可以放大他们的电子邮件。 我需要帮助在iOS手机上将响应式电子邮件呈现到全宽。
疑难解答
当我删除所有css样式时，它会在手机上正确呈现（全宽）。但我需要电子邮件才能做出回应。
不适合我的在线解决方案
<meta name="x-apple-disable-message-reformatting" />中添加此元标记一样简单。<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no"> <body style="width: 100%; max-width: 600px;> 这是我的代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta class="mktoColor" id="headlineColor" mktoname="Headline Color" default="#003a70">
<meta class="mktoColor" id="textColor" mktoname="Main Text Color" default="#333333">
<meta class="mktoColor" id="mkto-callout-text-bg-color" mktoname="Callout BG Color" default="#00843d">
<meta class="mktoColor" id="mkto-callout-text-color" mktoname="Callout Text Color" default="#ffffff">
<meta class="mktoColor" id="mkto-cta-text-link" mktoname="CTA Text Link Color" default="#00843d">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoname="CTA BTN Bg Color" default="#003a70">
<meta class="mktoColor" id="mkto-footer-link-color" mktoname="Footer Link Color" default="#418fde">
<title>Test</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-width: 100% !important;
-webkit-text-size-adjust:none !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
.button-td, .button-a {
transition: all 100ms ease-in;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.fluid, .fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column, .stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#f2f2f2" width="100%" style="margin: 0; min-width: 100%; -webkit-text-size-adjust:none;" yahoo="yahoo">
<table bgcolor="#f2f2f2" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container mktoContainer" id="mkto-container" style="width: 600px;">
<tr class="mktoModule" id="logo-container" mktoname="Header logo">
<td style="padding: 20px 0; text-align: center">
<div class="mktoImg" id="header-logo-image" mktoname="Header Logo Image" mktolockimgsize="true">
<a href=""><img src="" width="250" height="50" style=""></a>
</div> </td>
</tr>
<tr class="mktoModule" id="body-copy-section" mktoname="Body copy with headline">
<td style="padding-left: 40px; padding-right: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="headlineText" mktoname="Headline">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 24px; mso-height-rule: exactly; line-height: 32px; color: ${headlineColor};"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="mktoText" id="Paragraph1text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. <a href="" style="color: ${mkto-cta-text-link};" target="_blank"><u>This is a link, it is underlined and the hex code is #eb6b19.</u></a> </p>
</div> </td>
</tr>
<tr class="mktoModule" id="hero-container" mktoname="Hero Image">
<td class="full-width-image">
<div class="mktoImg" id="hero-banner-image" mktoname="Hero Banner Image" mktolockimgsize="true">
<a href=""><img src="" width="600" alt="alt_text" style="width: 100%; max-width: 600px; height: auto;"></a>
</div> </td>
</tr>
<tr class="mktoModule" id="centered-btn" mktoname="CTA Button">
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td">
<a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a" id="mkto-button" mktoName="Button">
CTA BUTTON 1
</a>
</td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="video-screenshot" mktoname="video screenshot">
<td class="full-width-image">
<div class="mktoImg" id="full-width-image" mktoname="Full Width Image" mktolockimgsize="true">
<a href=""><img src="" width="600" alt="Image" style="width: 100%; max-width: 600px; height: auto;"></a>
</div> </td>
</tr>
<tr class="mktoModule" id="bullet-group" mktoname="Bulleted List">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph2text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};">Maecenas sed ante pellentesque:</p>
</div>
<div class="mktoText" id="bulletedList" mktoname="Bulleted List">
<ul>
<li style="margin-bottom: 10px; margin text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div> </td>
</tr>
<tr class="mktoModule" id="signature" mktoname="Signature">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph3text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Regards, <br> <br> <strong><span style="color: #003a70">Our Team</span></strong><br></p>
</div> </td>
</tr>
<tr class="mktoModule" id="three-col-img-text" mktoname="Three columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-left-image" mktoname="Lower Left Image" mktolockimgsize="true">
<a href=""><img src="" width="170" height="170" alt="alt_text" class="fluid"></a>
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerLeftImageText" mktoname="Lower Left Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-middle-image" mktoname="Lower Middle Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid"></a>
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerMiddleImageText" mktoname="Lower Middle Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-right-image" mktoname="Lower Right Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid"></a>
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerRightImageText" mktoname="Lower Right Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="callout-box" mktoname="Callout Box">
<td bgcolor="${mkto-callout-text-bg-color}" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="middle" style="text-align: center; padding: 40px;">
<div class="mktoText" id="calloutText" mktoname="Callout Box Text">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${mkto-callout-text-color};;"> <strong>Call out box:</strong> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </p>
</div> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="mktoModule" id="two-col-img-text" mktoname="Two columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-left-image" mktoname="Top Left Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid"></a>
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topLeftImageText" mktoname="Top Left Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-right-image" mktoname="Top Right Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid"></a>
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topRightImageText" mktoname="Top Right Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="left-img-right-copy" mktoname="Left image, right copy">
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-left-image" mktoname="Bottom Left Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow"></a>
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText1" mktoname="Bottom Image Text 1">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"><a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
CTA BUTTON 2
</a> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="right-img-left-copy" mktoname="Right image, left copy">
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-right-image" mktoname="Bottom Right Image" mktolockimgsize="true">
<a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow"></a>
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText2" mktoname="Bottom Image Text 2">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"> <a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> CTA BUTTON 3</a> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="thick-divider" mktoname="CC, Phone and Web link">
<td class="full-width-image">
<div class="mktoImg" id="footer-image" mktoname="Footer Image" mktolockimgsize="true">
<a href=""><img src="" width="600" alt="" style="width: 100%; max-width: 600px; height: auto;"></a>
</div> </td>
</tr>
</table>
</center> </td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分：1)
正如我在聊天中发现的那样，问题是表格修复了导致问题的CSS。删除后，表格开始全宽。
在：
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
后：
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
margin: 0 auto !important;
}
干杯