我正在做一封响应式电子邮件,如果在移动设备上查看电子邮件,我可以移动图片。除了Outlook之外,一切看起来都很棒。它在两个地方都显示出来。我读到outlook无法识别“display:none”代码。还有什么可以做的吗?
以下是我的代码看起来像以及除了outlook之外的所有内容。
媒体查询代码
@media only screen and (max-device-width: 479px) {
#mobile {display:block}
#desktop {display:none;mso-hide: all;}
}
@media only screen and (min-device-width: 480px) {
#mobile {display:none;mso-hide: all;}
#desktop {display:block}
}
}
这是我正在使用的HTML。
<table id="mobile" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="right" class="hisrc">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
<img src="vna-logo.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />
</td>
</tr>
</table>
<table id="desktop" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="right" class="hisrc">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
<img src="vna-logo-2.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />
</td>
</tr>
</table>
答案 0 :(得分:0)
<table id="mobile" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="display:none;">
默认情况下应隐藏移动版本,将隐藏在不接受查询的客户端