有没有办法在iPhone上查看时从电话号码中删除默认的蓝色超链接颜色？像要添加的特定Mobile Safari标记或CSS一样？
我只有这个数字:
Call us on +44 (0)20 7194 8000
并且没有超链接,但iPhone仍然将此文本编号作为超链接呈现.我在我的一些网站上有这个渲染问题,但无法理解为什么会这样.
我读过这篇文章:
移动HTML呈现数字
但这是唯一可行的解决方案吗？
两种选择......
1.设置format-detection元标记.
要删除所有自动格式化的电话号码,将其添加到head您的html文档:
查看更多Apple特定的元标记密钥.
注意:如果您在页面上有这些号码的电话号码,您应该手动将它们格式化为链接:
1-555-555-5555
css吗？
两种css选择:
使用此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 */
}
或者,您可以在无法设置元标记时 - 例如在链接/锚标记()中的html电子邮件包装电话号码中,然后使用类似于以下的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选择器更新为a[x-apple-data-detectors].class-name.
只是要详细说明David Thomas早先的建议:
a[href^="tel"]{
color:inherit;
text-decoration:none;
}
将此添加到您的css会留下电话号码的功能,但会删除下划线并匹配您最初使用的颜色.
奇怪,我可以发布自己的答案,但我不能回应别人的..
如果您想保留电话号码的功能,但只是为了显示目的而删除下划线,您可以将链接设置为任何其他类型:
a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }
我没有看到建议将类应用于电话号码链接的文档,因此您必须将类/ ID添加到您想要具有不同样式的链接.
您也可以使用以下方式设置链接样式
a[href^=tel] { /* css */ }
这是iPhone的理解,并且不会被任何其他UA应用(据我所知,也许Android,Blackberry等用户/开发者可以发表评论).
如果人们在Google上发现此问题,您需要做的只是将电话号码视为链接,因为Apple会自动将其设置为一个.
你的HTML
Call us on +44 (0)20 7194 8000
你的CSS
#phone-text a{color:#fff; text-decoration:none;}
由于我们在一个带有电话图标的网站上使用tel:links:在此处发布的大多数解决方案引入了另一个问题.
我使用了元标记:
这与在网站范围内指定tel:links相关联,它应该链接在一起!
使用css实际上不是一个选项,因为它隐藏了相关的电话链接.
简单的技巧对我有用,在电话号码中间添加了一个隐藏的对象.
0800- 9996369
这将帮助您覆盖IOS的电话号码颜色.
一个老问题,但由于上述答案都不适合我,我发布了如何解决它
我在列表中有一个电话号码:
CSS:
.phone_menu{
color:orange;
}
但是在iPad/iPhone上它是黑色的,所以我把它添加到了css中:
.phone_menu a{
color:orange;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 
