我已经定制了一个电子邮件模板，似乎在大多数设备和邮件服务器上运行良好，但是当涉及到iphone 5s时，响应式布局（一列而不是两列）不会被触发，我也不会知道原因。
我尝试过“缩小到适合：不”，以修复一些调整大小问题，但这只会使布局保留为桌面版本。
这是我的任何帮助代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style type="text/css">
/* Client-specific Styles */
div, p, a, li, td { -webkit-text-size-adjust:none; }
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
html{width: 100%; }
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/* iPhone 5 Retina regardless of IOS version */
@media screen and (device-aspect-ratio: 40/71) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #c3cd2a; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #c3cd2a !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=col2img] {width: 280px!important;height:140px!important;}
} /*IPhone 5 only CSS here*/
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #c3cd2a; /* or whatever your want */
pointer-events: none;
cursor: default;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #c3cd2a !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=col2img] {width: 440px!important;height:220px!important;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #c3cd2a; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #c3cd2a !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=col2img] {width: 280px!important;height:140px!important;}
}
</style>
</head>
<body>
<!-- Start of header -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="header">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" bgcolor="#c3cd2a" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="borde">
<tbody>
<tr>
<td>
<!-- logo -->
<table bgcolor="#c3cd2a" width="284" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="284" height="60" align="left">
<div class="imgpop">
<a target="_blank" href="#">
<img src="cabecera3.jpg" alt="" border="0" width="210" height="37" style="display:block; border:none; outline:none; text-decoration:none;"/>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of logo -->
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:16px; text-align:right; color:#ffffff; font-weight: bold; padding-right:15px"> Mail title
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Header -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="seperator">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="0" style="font-size:1px; line-height:1px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- start of Full text -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- Title -->
<tr>
<td height="25px">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 34px; font-weight:bold; color: #000000; text-align:center; line-height: 38px;">
Titular amb unes quantas paraules per llegir
</td>
</tr>
<!-- End of Title -->
<!-- spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- End of spacing -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly; background-color:#fff"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Full Text -->
<!-- Start of Left Image -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="left-image" >
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="background-color:#fff">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td>
<!-- Start of left column -->
<table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image -->
<tr>
<td width="280" height="140" align="center" class="devicewidth">
<img src="foto.jpg" alt="" border="0" width="280" height="140" style="display:block; border:none; outline:none; text-decoration:none;"/>
</td>
</tr>
<!-- /image -->
</tbody>
</table>
<!-- end of left column -->
<!-- spacing for mobile devices-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of for mobile devices-->
<!-- start of right column -->
<table width="280" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth" >
<tbody>
<tr>
<td>
<table width="300" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #666; text-align:left; line-height: 26px">
<br/>• xxxx xx xxxxxx x xxx
<br/>• xxxx xx xxxxxx x xxx
<br/>• xxxx xx xxxxxx x xxx<br/>
</td>
</tr>
<!-- end of content -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- /Spacing -->
<!-- START CENTERED BUTTON -->
<tr><td>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="2" width="100%" style="font-size: 2px; line-height: 2px;">
</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#c3cd2a" width="150">
<a href="http://www.example.com" style="padding: 10px;width:200px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 17px;font-family: Arial, Helvetica, sans-serif; color: #ffffff;background: #c3cd2a;line-height:17px;" class="button_link"><img src="info.jpg" alt="" width="18" height="18" />
Més informació
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="2" width="100%" style="font-size: 2px; line-height: 2px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td></tr>
<!-- END CENTERED BUTTON -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of right column -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Left Image -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="seperator">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="30" style="font-size:1px; line-height:1px; background-color:#FFF"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- start of Full text -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="border: 2px #c3cd2a dashed ">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #666; text-align:left; line-height: 24px; padding-right:10px; padding-left:10px">
<br/>
El futur és tant important com el passat i el present. Per això, ara és el moment de començar a planificar el demà.<br/><br/>
Si vols calcular la teva jubilació abans de accedir als regals exclusius, prova el nou simulador online de jubilació.<br/><br/>
Perquè el temps passa més de pressa del que creus, pensa en la teva jubilació, pensa en els nostres plans.<br/><br/>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="32px" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- /Spacing -->
<!-- End of content -->
</tbody>
</table>
<!-- End of Full Text -->
<!-- spacing for mobile devices-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of for mobile devices-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Right Image -->
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth" style="background-color:#FFF">
<tbody>
<!-- Spacing -->
<tr>
<td width="600" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly; background-color:#fff"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!--inici icones-->
<table bgcolor="#FFFFFF" align="right" cellpadding="0" cellspacing="0" style="box-shadow: 0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 5px 15spx 0 rgba(200, 200, 200, 0.7) ;">
<tbody style=" z-index:1">
<tr><td height="10" colspan="6"></td></tr>
<tr>
<td width="15"></td>
<td width="60" style="border-right:#5e5e5e 1px solid; text-align:center" ><img src="linkedin.jpg" width="35" alt="" height="35" /></td>
<td width="60" style="border-right:#5e5e5e 1px solid; text-align:center"><img src="pinterest.jpg" width="35" alt="" height="35" /></td>
<td width="60" style="border-right:#5e5e5e 1px solid; text-align:center"><img src="facebook.jpg" width="35" alt="" height="35" /></td>
<td width="60" style="text-align:center"><img src="youtube.jpg" width="35" alt="" height="35" /> </td>
<td width="15px"></td>
</tr>
<tr><td height="10" colspan="6"></td></tr>
</tbody>
</table>
<!--fi de icones-->
</td>
</tr>
<!-- content -->
<!--inici legal-->
<tr>
<td bgcolor="#CCCCCC" style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #ffffff; text-align:left; line-height: 16px; padding-left:25px; padding-right:25px">
<br/> Consultar les bases legals.Li recordem que
Crèdit Andorrà mai no li demanarà, per correu electrònic ni en formularis, dades confidencials com ara contrasenyes o números secrets.<br/>
</td>
</tr>
<!--fi del legal-->
<tr>
<td height="25px"> </td>
</tr>
<!-- End of content -->
</tbody>
</table>
</body>
</html>
答案 0 :(得分：0)
Gmail应用中未触发自适应布局，因为它不允许媒体查询。如果您希望自己的电子邮件在Gmail应用中具有响应能力，那么您需要重建这是一个流畅的混合模板。
流体混合设计将允许您构建一个无需任何媒体查询即可响应的模板。
要了解有关流体混合技术的更多信息，请尝试以下博客：https://www.emailonacid.com/blog/article/email-development/a-fluid-hybrid-design-primer