禁用EDM在IOS设备中的蓝色链接
大家新年好啊. 春节过后的第一篇文章来了.
今天讲讲在春节前碰到的一个问题: EDM的某些词组在IOS设备中会被自动加上蓝色链接.
一. 不请自来的自动蓝色链接
你或许已经注意到了:
在IOS设备的邮件客户端中, 如果你的EDM如果包含电话号码, 地址, 日期, 它们会自动被加上蓝色下划线链接.
二. 尝试各种解决方案
1. 使用META TAGS
在制作手机页面的时候, 我们一般会加上一个meta, 目的是禁止页面自动将数字解析成电话号码.
<meta content="telephone=no" name="format-detection" />
那么同理, 可以使用这种方法来解决EDM中的自动蓝色链接问题.
但是, 这种方法有很多弊端:
a. 使得原本可以在数字上直接拨号的功能无法使用了;
b. 对日期, 地址等自动蓝色链接不起作用.
2. 使用通用匹配样式
如:
a[href^=tel]{ color:#555; text-decoration:none;}
弊端:
a. 像电话, 日期, 地址都要写CSS;
b. 同时也不够灵活. 比如在EDM的不同部分, 你需要给不同的电话号码写不同的颜色就没辙了.
3. 使用Class来控制 (推荐)
.linkW a {color: #ffffff !important; text-decoration: none;}
.linkB a {color: #000000 !important; text-decoration: none;}
然后把电话, 日期, 地址等用一个span标签包起来:
<span class="linkB">13467553653</span>
你可能会有疑问, EDM中不是不推荐使用style的么?
是滴, 的确不推荐使用style.
但是本文只是专门使用style来解决EDM中日期和地址等在IOS邮件客户端中自动被加上蓝色链接的问题. IOS邮件客户端是可以识别style的.
