前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 禁用EDM在IOS设备中的蓝色链接

禁用EDM在IOS设备中的蓝色链接

发布者:前端集合 // 发布时间:2014-02-06 11:24:06 // 分类:前端集合 // 访问: 1,949 次 // 热度: 0人参与

大家新年好啊. 春节过后的第一篇文章来了.

今天讲讲在春节前碰到的一个问题: 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的.

Tags: EDM, IOS设备, 蓝色链接, ios, blue link

不折腾会不会死? 博客换皮更换心>>  << 12大在线图片占位符服务
Top