html - 电子邮件模板无法在 Gmail 客户端 Iphone 中正确呈现
问题描述
如何为 Iphone 制作固定宽度的电子邮件模板？如果宽度比视口长 - 减小比例。
现在我遇到的问题似乎可能与 iPhone 上 iOS 上的 Gmail 客户端中的电子邮件大小有关。尽管此模板在所有客户端中看起来都不错，但我在 Iphone 上的 Gmail 客户端中得到的结果看起来很压缩：
Android 中的电子邮件模板渲染：
IOS（Iphone）中的电子邮件模板渲染：
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">
<title>Performance Scorecard</title>
</head>
<body>
<table width="640" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Hi <span>{FirstName}</span>,</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Your Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td>
</tr>
<tr>
<td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td>
<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; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; 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>
</td>
<td width="490" align="left" valign="middle" style=" width: 495px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width: 100%;">
<tr>
<td>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px;">
<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>
</td>
</tr>
{blockComments}
<!-- end main -->
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Please click on this <a href="{EmailLinkCode}" style="color: #4285F4;">link</a> to view your complete scorecard.</td>
</tr>
</table>
</body>
</html>解决方案
推荐阅读
- exception - 在路径上找不到类“com.android.volley.toolbox.JsonObjectRequest”：DexPathList
- python - 如何启用 jupyter_http_over_ws 扩展
- r - 如何将频率表从 rstudio 导出到 Microsoft Word 2016？
- android - Kotlin 比较按钮背景颜色
- nginx - 有没有办法在 Nginx 中启用/设置 ESNI？
- java - 手动缓存 Rest 而不检查 ETag 和 Last-Modified 的标头
- java - 我收到“启动 ApplicationContext 时出错。要显示条件报告，请在启用了 'debug' 的情况下重新运行您的应用程序。” 解决方案？
- c++ - 关于构造函数匹配和隐式转换的问题
- python - 自定义损失函数的反向传播问题
- swift - 如何快速将 URL 分配给 imageView？