iPhone瀏覽器會把類似手機號或者電話號的一串數字的樣式字型改為灰色
阿新 • • 發佈:2019-02-17
問題描述
今天朋友拋了一個問題給我,大概就是她下面的數字的樣式跟預想的樣式不一樣。
<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>