iPhone浏览器会把相似手机号或者电话号的一串数字的样式字体改成灰色

问题描述

今天朋友抛了一个问题给我，大概就是她下面的数字的样式跟预想的样式不同。web

<div class="col-sm-8 col-sm-offset-2 text-center margin-btm20" style=" font-size: 18px;">
                <p class="wow animated fadeInUp animated" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp;">
                    CONTACT：********
                </p>

                <p class="wow animated fadeInUp animated" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp; color: #fff;">
                    TEL： 86-519-*****201                 </p>


                <p class="wow animated fadeInRight animated" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInRight; color: #fff;">
                    FAX： 86-519-******99                </p>

                <p class="wow animated fadeInRight animated" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInRight; color: #fff;">
                    PHONE： 15*******60                </p>

                <p class="wow animated fadeInLeft animated" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInLeft;">
                    <span></span> <span>ADD：Changzhou City, Jiangsu, China new North Tianshan Road, No. 22  </span>
                    <span>  </span>
                </p>
            </div>

上面的代码不完整你们看看就能够，下面有图。
预想的效果应该是这样（这是在电脑浏览器看到的样子）

而在个人手机上倒是这样（我手机是iPhone6s）

第一张图是我在电脑浏览器上面看到的，下面一张是我在个人手机上看到的。很明显就是那些数字的颜色变了。浏览器

解决思路

由于我仔细观察过，当手机加载网页不是那么快的时候，我手机一开始显示的那些手机号码确实也是白色的，只不过一闪而过以后就变成灰色的了。
因此我就猜想，是否是她引入了哪段js或者什么插件，把全部p标签下面的数字的颜色都改变了（若是真是这样，那写这段js或者插件的人也太蠢了吧）。
可是我找了半天没找到，又再手机上点点。发现那些变颜色的数字是被自动加上了连接，点了以后会像下面这样。

而下面的那俩数字“22”点了并不会弹出呼叫号码的弹窗。
这样就显然易见了，iPhone手机浏览器在加载网页的时候，会把疑是手机号或者电话号的一串数字加上一个链接，点了以后会弹出拨打号码的窗口，并且被点中的号码的颜色跟未被点中的号码的颜色还不同，当前点中的好像是有点偏蓝，未点中的颜色简直就是黑的同样。svg

解决办法

将手机自动识别手机的功能关闭：spa

<meta name="format-detection" content="telephone=no" />

若是你还想要识别手机号的功能能够这样：插件

<a href="tel:15*******60">15*******60</a>