如何识别用户所用邮件客户端并定制HTML邮件？

你要的根据客户端动态显示签名编辑指引是可以实现的，核心思路是利用不同邮件客户端的CSS渲染差异和专属条件语法，不需要JS或UA媒体查询，下面是几个行业通用的靠谱方法：

1. 针对Outlook的专属条件注释 #

Outlook（桌面版）支持微软特有的条件注释语法，能精准控制仅在Outlook中显示/隐藏内容：

<!--[if mso]>
  <div class="outlook-guide">
    这里是Outlook的签名编辑步骤：...
  </div>
<![endif]-->

同时可以用这个语法隐藏其他客户端的内容：

<!--[if !mso]><!-->
  <div class="non-outlook-content">
    非Outlook客户端的内容
  </div>
<!--<![endif]-->

2. 利用Gmail的CSS特性差异 #

Gmail对CSS的支持有独特限制，比如不支持某些高级选择器，但支持基础媒体查询和属性选择器。可以通过以下技巧实现Gmail专属内容：

<style>
  /* 默认隐藏Gmail专属内容 */
  .gmail-guide {
    display: none !important;
  }
  /* 仅Gmail识别这个属性选择器规则，显示内容 */
  [data-google-mail] .gmail-guide {
    display: block !important;
  }
</style>

<div class="gmail-guide">
  这里是Gmail的签名编辑步骤：...
</div>

另外，Gmail移动端支持max-width媒体查询，可以结合视口宽度做适配，进一步区分移动端和桌面端的Gmail。

3. Apple Mail/iOS邮件的适配 #

Apple Mail支持完整的CSS特性，可以用媒体查询结合-webkit-min-device-pixel-ratio等专属特性来识别：

<style>
  .apple-guide {
    display: none;
  }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .apple-guide {
      display: block;
    }
    /* 同时隐藏其他客户端内容 */
    .outlook-guide, .gmail-guide {
      display: none;
    }
  }
</style>

<div class="apple-guide">
  这里是Apple Mail的签名编辑步骤：...
</div>

注意事项 #

• 没有100%完美的适配方案，部分小众客户端可能无法精准识别，但主流的Gmail、Outlook、Apple Mail都能覆盖
• 所有CSS建议内联写在<style>标签里，不要用外部样式表，避免被邮件客户端拦截
• 测试时一定要用真实邮件客户端预览，不要只依赖浏览器

内容的提问来源于stack exchange，提问作者Scrollwheelie