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

最新推荐文章于 2024-09-02 17:08:20 发布

jurlon

最新推荐文章于 2024-09-02 17:08:20 发布

阅读量6.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：原创技术与感悟文章标签：浏览器 iphone 手机字体

本文链接：https://blog.youkuaiyun.com/jurlon/article/details/52154420

原创技术与感悟专栏收录该内容

20 篇文章

订阅专栏

在iPhone浏览器中，数字序列如果类似电话号码，会被自动识别并变为灰色链接，点击后会弹出拨号窗口。文章描述了这一现象，并提出了解决方案：关闭手机自动识别电话号码的功能，或者通过特定方式保留识别功能但避免样式异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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

<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手机浏览器在加载网页的时候，会把疑是手机号或者电话号的一串数字加上一个连接，点了之后会弹出拨打号码的窗口，而且被点中的号码的颜色跟未被点中的号码的颜色还不一样，当前点中的好像是有点偏蓝，未点中的颜色简直就是黑的一样。

解决办法

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

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

如果你还想要识别手机号的功能可以这样：

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