仅用CSS区分移动浏览器与移动应用的实现方案咨询

由于邮件客户端的CSS支持差异极大，我们可以利用客户端专属CSS Hack来区分移动浏览器和邮件应用（Outlook/Gmail），从而实现仅在邮件应用中启用RWD样式：

1. 核心思路 #

先给所有移动设备设置「默认不启用RWD」的样式，再针对Gmail、Outlook移动应用分别使用专属Hack覆盖为启用RWD的样式。

2. 具体代码实现 #

/* 全局基础样式（非移动设备） */
.rwd-section {
  width: 600px;
  margin: 0 auto;
}

/* 所有移动设备（浏览器+应用）默认不启用RWD */
@media screen and (max-width: 600px) {
  .rwd-section {
    width: auto !important;
    /* 重置为原始固定宽度或自适应父容器 */
  }
}

/* --- Gmail移动应用专属：启用RWD --- */
/* Gmail会在<body>前插入<u>标签，此选择器仅Gmail能识别 */
@media screen and (max-width: 600px) {
  u + .body .rwd-section {
    width: 100% !important;
    padding: 0 15px !important;
    /* 其他RWD样式 */
  }
}

/* --- Outlook移动应用专属：启用RWD --- */
/* Outlook移动端支持带_mso_前缀的私有属性 */
@media screen and (max-width: 600px) {
  .rwd-section {
    _mso-width: 100% !important;
    _mso-padding-left: 15px !important;
    _mso-padding-right: 15px !important;
    /* 其他RWD样式 */
  }
}

3. 关键说明 #

• Gmail Hack：u + .body是经过长期验证的Gmail专属选择器，仅Gmail移动端/网页版会识别该规则，移动浏览器无此结构，因此不会应用RWD样式。
• Outlook Hack：_mso_前缀是Outlook移动端（iOS/Android）支持的私有属性前缀，其他客户端（包括移动浏览器）会忽略这些前缀属性。
• 反向排除：通过先设置移动设备默认不启用RWD，再用客户端Hack覆盖，避免了移动浏览器误触发RWD的问题。

4. 额外适配（针对DuckDuckGo等小众移动浏览器） #

这些浏览器的CSS支持与Chrome/Safari一致，上述方案已覆盖——它们不会识别Gmail/Outlook的专属Hack，因此会保留「不启用RWD」的默认样式。

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