问题
我在 Litmus 中测试了我的电子邮件，它只在 iOS 手机中以电子邮件窗口的一半大小呈现，如图所示 here .听起来 Apple 在 iOS 10 中进行了此更新，因此用户可以放大他们的电子邮件。 我需要帮助才能在 iOS 手机上将响应式电子邮件呈现为全宽。
疑难解答
当我删除所有 css 样式时，它会在手机上正确呈现(全宽)。但我需要电子邮件来响应。
不适合我的在线解决方案
- 我在网上的几个地方看到过这个问题，比如 here和 here解决方案就像在
<meta name="x-apple-disable-message-reformatting" />中添加此元标记一样简单. -
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no"> - 正文{宽度:100%；最大宽度:600px；
-
<body style="width: 100%; max-width: 600px;> - 将表格宽度设置为 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>
最佳答案
正如我在聊天中发现的那样，问题是导致问题的表固定 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;
}
干杯
关于html - iOS 渲染电子邮件一半大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48694641/