邮件模板中如何根据客户端设备类型跳转至不同站点

核心限制说明 #

所有主流邮件客户端（Gmail、Outlook、国内各主流邮箱服务）的安全策略都会强制过滤所有脚本相关内容：不仅<script>标签会被直接移除，HTML标签上的onclick等内联事件属性也会被完全剥离，所有依赖JavaScript执行的逻辑在邮件环境中都没有运行可能，原有基于JS的跳转方案从原理上就无法生效。

可落地的兼容方案 #

目前兼容性100%、不会被邮件客户端拦截的实现思路，是将设备判断逻辑从邮件内容侧迁移到你可控的中间跳转节点，邮件内仅保留最普通的链接，不需要嵌入任何脚本或特殊属性：

• 邮件内的跳转按钮使用标准<a>标签实现，href统一指向你自有域名下的中间跳转地址，不要直接写死桌面/移动端的最终地址，参考写法：

<a href="https://你的自有域名/route/redirect" target="_blank">
  点击访问
</a>

• 用户点击链接发起请求时，你的服务端可以直接从请求头中读取User-Agent字段，复用你已经写好的设备判断逻辑，识别当前访问设备是桌面端、移动端还是平板
• 服务端直接返回302/301重定向响应，将用户引导至对应设备匹配的目标站点即可

如果不想搭建独立后端，也可以通过静态托管平台的边缘计算能力实现UA识别和重定向，逻辑完全一致，部署成本极低。

注意避坑 #

• 不要尝试用CSS媒体查询、CSS伪类等纯CSS方案实现设备跳转：邮件客户端对CSS的支持限制极多，这类写法大概率被过滤失效，且只能通过屏幕宽度做粗略判断，无法准确区分平板、大屏手机和桌面设备，误判率极高。
• 增加兜底逻辑：如果遇到特殊客户端导致UA识别失败，可以在中间跳转页展示两个清晰的手动选择入口，分别对应桌面端、移动端站点，避免用户无法正常访问。

极简服务端实现参考（Node.js） #

const http = require('http');

function getDeviceType(ua) {
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
    return "mobile";
  }
  return "desktop";
}

http.createServer((req, res) => {
  if (req.url === '/route/redirect') {
    const userAgent = req.headers['user-agent'] || '';
    const deviceType = getDeviceType(userAgent);
    const target = deviceType === 'desktop' ? '你的桌面端站点地址' : '你的移动端/平板端站点地址';
    res.writeHead(302, { Location: target });
    res.end();
    return;
  }
  // 其余业务路由逻辑
}).listen(80);

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