【发布时间】：2022-01-03 14:35:58
【问题描述】：
现在我遇到的问题似乎可能与 iPad 上 iOS 上的邮件客户端中的电子邮件大小有关。尽管此模板在所有客户端中看起来都不错，但我在 Iphone 上的 Mail Client 中得到的结果看起来是压缩的
Mail 中的电子邮件模板渲染：
在其他客户端中呈现电子邮件模板：
HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Rater8.Performance Scorecard</title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (min-device-width: 600px), only screen and (min-width: 600px) {
.table_logo {
min-height: 80px;
}
}
</style>
</head>
<body style="padding:0; margin:0px;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="max-width: 620px; width: 100%; line-height: 1.1em; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; background-color: #fff;">
<tr><td colspan="2" style="padding-bottom: 12px; text-align: left;">Hi <span>{FirstName}</span>,</td></tr>
<tr><td colspan="2" style="padding-bottom: 12px; text-align: left;">Your rater8 Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td></tr>
<tr><td colspan="2" style="padding-bottom: 12px; text-align: left;">Please click on this <a href="{EmailLinkCode}" style="color: #4285F4;">link</a> to view your complete scorecard. If you have any questions, please ask your practice administrator or email <a style="color: #4285F4;" href="mailto:support@rater8.com">support@rater8.com</a>.</td></tr>
<tr>
<td colspan="2" align="center">
<!--[if (gte mso 9)|(IE)]>
<tr>
<td width="22%" style="width: 22%; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<![endif]-->
<div style="width: 100%; text-align: center;">
<div style="border: 1px solid #CACACA; min-height: 246px; padding: 3px; border-radius: 5px; display: inline-block; margin-bottom: 3px; margin-right: 3px; text-align: left;">
<table width="180" cellspacing="0" cellpadding="0" border="0" style="width: 180px;" align="left">
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" style="width: 180px;">
<tr>
<td colspan="2" style="width: 100%; padding-bottom: 20px; padding-top: 3px; text-align: center;"><img src=cid:logoLR width="100"></td>
</tr>
<tr>
<td style="padding-right: 5px;"><img width="65" height="65" style="border-radius: 50%; overflow: hidden;" src=cid:{imgCId}></td>
<td>
<span style="font-size: 14px; line-height: 1em; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; line-height: 1em; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; line-height: 1em; color:#BDBDBD;">{TenantName}</span>
</td>
</tr>
<tr>
<td style="font-weight: bold; font-size: 24px; padding-top: 15px; text-align: center;">
<span>{AverageRating}</span>
</td>
<td style="padding-top: 15px;">
<table cellspacing="0" cellpadding="0" border="0" style="font-size: 14px;">
<tr><td style="text-align: right; padding-left: 7px;">{RatingsCount}</td><td style="padding-left: 5px;">Ratings</td></tr>
<tr><td style="text-align: right; padding-left: 7px;">{ReviewsCount}</td><td style="padding-left: 5px;">Comments</td></tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<table cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="text-align: center;"><img width="30" height="30" src=cid:{firstStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{secondStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{thirdStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fourthStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fifthStar}></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><![endif]-->
<!--[if (gte mso 9)|(IE)]><td width="78%" valign="middle" style="width: 78%; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px"><![endif]-->
<div style="display: inline-block; text-align: left; min-height: 246px; min-width: 68%;">
<table border="0" align="left" cellspacing="0" cellpadding="0" style="max-width: 423px; width: 100%">
<tr>
<td align="left">
<table class="table_logo" cellpadding="0" cellspacing="3" border="0" style="width: 100%;" >
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px; border-radius: 5px;">
<table class="table" cellspacing="0" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td></td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">{MonthAndYear}</td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">Since Go-Live</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Review Requests Sent</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Review Requests Responded</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Response Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRateAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Online Review Site Redirects</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Online Reviews Added</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFFF; padding: 3px 5px; font-size: 11px;">Conversion Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRateAddedAllTime}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!--[if (gte mso 9)|(IE)]></tr></td><![endif]-->
</td>
</tr>
{blockComments}
<!-- end main -->
<tr><td colspan="2" style="padding-bottom: 12px; padding-top: 12px; text-align: left;">Best regards,</td></tr>
<tr><td colspan="2" style="padding-bottom: 12px; text-align: left;">The rater8 Data Analytics Team</td></tr>
</table>
</body>
</html>【问题讨论】：
-
你在标题中提到了 iPad，但在描述中提到了 iPhone？您是否在两台设备上都看到了问题？如果是这样，那可能意味着一个更广泛的问题。如果只是 iPhone，则可能是您的内容不灵活，无法适应较小的屏幕来适应电子邮件的宽度。尽管标签文本无法换行，但很难在代码中使用您的数据变量进行测试。如果您能提供一个完整测试的最终代码示例会很好...？
-
要找出哪个部分对它来说太宽，要做的基本事情是一次删除一个部分，然后看看有什么解决办法。这可能是一张难以压缩的大桌子。
标签： html css email templates html-email