在iPhone上查看电话号码时,是否有办法删除默认的蓝色超链接颜色?像一个特定的移动Safari标签或CSS添加?
我只在数字的地方有这个:
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
这里没有超链接,但iPhone仍然将这个文本数字显示为超链接。我在我的一些网站上有这个渲染问题,但不明白为什么会发生这种情况。
我确实读过这篇文章:
移动HTML渲染数字
但这是唯一可行的解决方案吗?
两个选项…
1. 设置格式检测元标记。
要删除所有电话号码的自动格式化,请将以下内容添加到html文档的头部:
<meta name="format-detection" content="telephone=no">
查看更多苹果特定的元标签键。
注意:如果你在页面上有电话号码,你应该手动将它们格式化为链接:
< a href = "电话:+ 1-555-555-5555 " > 1-555-555-5555 < / >
2. 不能设置元标签?想要使用css?
两个css选项:
选项1(更适合网页)
使用css属性选择器来目标href值以tel开头的链接:
a[href^="tel"] {
color: inherit; /* Inherit text color of parent element. */
text-decoration: none; /* Remove underline. */
/* Additional css `propery: value;` pairs here */
}
选项2(更适合html电子邮件模板)
或者,当你不能设置元标签时,比如在html电子邮件中,在链接/锚标签中包装电话号码(<a href=""></a>),然后使用类似于下面的css来定位它们的样式,并调整你需要重置的特定属性:
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
如果你想要针对特定的链接,在你的链接上使用类,然后更新上面的css选择器为[x-apple-data-detectors].class-name。
<meta name="format-detection" content="telephone=no">。这个metatag可以在iOS设备上的默认Safari浏览器中工作,并且只适用于没有被包裹在电话链接中的电话号码
1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>
如果指定了元标签,第一行将不会被格式化为链接,但第二行会,因为它被包装在电话锚中。
您可以完全放弃元标记,而使用mixin,例如
a[href^=tel]{
color:inherit;
text-decoration:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}
为了保持您的电话号码的预期样式,但您必须确保将它们包装在电话锚中。
如果您希望格外谨慎,防止出现没有使用包装锚标记正确格式化的电话号码,则可以钻取DOM并使用此脚本进行调整。根据需要调整替换模式。
$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));
或者没有jQuery更好
document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');
如果您不打算在您的页面上有任何电话号码,那么
<meta name="format-detection" content="telephone=no">
会工作得很好。但从修辞上讲,如果你打算混合使用电话号码和非电话号码呢?
假设您只是将数字硬编码到HTML中,那么“在数字中间插入一些东西”的技巧将会起作用。但是对于动态页面,例如使用PHP从查询中输出数值数据,它们几乎没有用处。
例如,我正在生成一个城市人口列表。有些用户数量大到足以让Mobile Safari把它们转换成电话号码链接。幸运的是,我所要做的就是使用PHP number_format()在数组输出周围插入“thousand”逗号:
<?PHP echo number_format($row["population"])
这种格式足以让Mobile Safari相信这个号码有更具体的用途,所以它不再把我的大号码默认为电话链接。@davidcondrey建议使用<a href="tel:18001234567">1-800-123-4567</a>来指定数字的用途,也是如此。
总之,Safari Mobile显然很注意语义。考虑到HTML5是围绕语义标记构建的,而搜索引擎也依赖于语义标记,我打算尽可能多地使用它。