【发布时间】：2018-11-09 08:40:22
【问题描述】：
我在 Outlook 中编码块时遇到问题。
我试图在桌面上只显示一个块，在移动设备上显示一个块，并且使用了类和媒体查询。我知道对于 Outlook，媒体查询存在问题，所以这可能是我遇到麻烦的地方。
这是我在浏览器中运行良好的代码，但是，当我在 Outlook 中预览时，它会在较大（桌面）版本中预览时同时显示桌面和移动版本：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
@media screen and (max-width: 599px) {
.mobile-hide {
display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
font-size:0 !important;
line-height:0 !important;
padding:0;
max-height:0;
width:0 !important;
}
.mobile-show {
display: block!important;
}
}
@media screen and (min-width: 600px) {
.desktop-hide{
display:none;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr class="mobile-hide">
<td width="10"> </td>
<td colspan="4" align="center">
<p style="font-family:Verdana,sans-serif;font-size:20px;color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;">
<span style="font-size:14px;color:white;padding:10px;background-color:lightblue;" bgcolor="lightblue">Test</span><br><br>
<img style = "display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50">
</p>
</td>
<td colspan="2" align="left" style="padding:20px;">
<p style="font-family:Verdana,sans-serif; color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;padding-left: :10px;">
<h2>Test Your Page</h2>
This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached.
</p>
</td>
<td width="30" style="padding:10px;"><b>Right</b>
</td>
</tr>
<tr class = "desktop-hide">
<td colspan="8">
<table class="mobile-width" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan ="2">Test Your Page <span style = "padding-left:30px;">Right</span></td></tr>
<tr><td><img style = "display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50"></td><td>This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached.</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
如果有人能帮我完成这项工作，那就太好了，以便在 Outlook 中预览时只显示一个，具体取决于显示的是桌面视图还是移动视图
【问题讨论】：
-
当对 meida 的支持充其量是零散的时候，为什么还要在您的电子邮件中坚持使用 meida 查询？ campaignmonitor.com/dev-resources/guides/mobile
-
感谢您的回复，本文档中的许多详细大纲似乎都引用了媒体查询。关于我上面的代码，是否可以建议/编辑它以使其在 Outlook 中工作，因此不会显示重复的内容，谢谢
-
重要的是底部的支撑台。 Outlook不支持媒体查询。我认为，由于支持不一致，目前尝试在电子邮件中使用媒体查询是浪费时间。 Outlook 或 Gmail 应用程序都不支持媒体查询，这是一个庞大的用户量。
-
好的，谢谢 Jon P，是否可以建议我如何在没有媒体查询的情况下重构上述代码，以便桌面行仅显示桌面，移动行仅显示移动，谢谢
-
您的选项通常是媒体查询，我们已经讨论过这些，或者支持更差的 javascript。我认为我的回答可能是最好的妥协。当我必须处理 HTML 电子邮件时，我倾向于将事情尽可能简单化，通常必须在此过程中做出很多妥协。
标签： html email media-queries newsletter