我的HTML电子邮件模板在Outlook中看起来不错,但在计算机上未启用DPI扩展,但启用DPI扩展时,它看起来应该不应该。我尝试并实施了解决方案here但没有成功。
您可以通过DPI缩放here查看电子邮件的外观。它们应该是两个300x300的盒子并排。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<style>
body { padding:0 !important; margin:0 !important; display:block !important; background:#ececec; -webkit-text-size-adjust:none }
img {display:block;}
table {border-collapse: collapse;}
table td {mso-table-lspace:0;mso-table-rspace:0;}
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
#container {
width:96% !important;
}
img {
width:100% !important;
height:auto !important;
}
.full-width {
width:100% !important;
height: auto !important;
display:block !important;
float:left !important;
}
</style>
</head>
<body bgcolor="#ececec" style="background-color:#ececec;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;width:100%;background-color:#ececec;">
<tbody>
<tr>
<td><center>
<!-- start CONTAINER -->
<table width="600" border="0" cellspacing="0" cellpadding="0" id="container" style="width:600px;mso-cellspacing: 0px; mso-padding-alt: 0px;" align="center">
<tbody>
<tr>
<td>
<!-- start HEADING -->
<table width="100%" border="0" cellspacing="0" cellpadding="30" style="mso-cellspacing: 0px; mso-padding-alt: 30px;">
<tbody>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center">
<span style="font-size:32px;color:#AAAAAA;font-family:Arial,sans-serif;" class="searchResults"><b>SEARCH RESULTS FOR</b></span> <span style="font-size:32px;color:#ed1c24;font-family:Arial,sans-serif;" class="searchHashtag"><b>#HASHTAG</b></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end HEADING -->
<!-- start SQUARE BLOCK -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tbody>
<tr>
<td width="50%" valign="top" class="full-width" style="width:300px;height:300px;"><img src="https://placehold.it/600" width="300" height="300" /></td>
<td width="50%" align="center" valign="middle" class="full-width" bgcolor="#002442" style="width:300px;height:300px;background-color:#002442;">
<table width="100%" border="0" cellspacing="0" cellpadding="20" align="center" style="width:300px;mso-cellspacing: 0px; mso-padding-alt: 20px;" class="full-width">
<tbody>
<tr>
<td valign="middle" align="center" width="100%"><a href="#" style="font-size: 28px; font-family: 'Arial'; color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; text-align: center;line-height:100%;text-decoration:none;">TITLE HERE</a><br><br>
<a href="#" style="font-size: 16px; font-family: 'Arial'; color: rgb(255, 255, 255); font-weight: normal; text-align: center; text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum magna, efficitur eget.</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end SQUARE BLOCK -->
</td>
</tr>
</tbody>
</table>
<!-- end CONTAINER -->
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
&#13;