wap页面中手机号码处理总结

Posted 2020-09-26

1、防止在ios设备中的Safari将数字识别为电话号码

在測试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色。点击还会弹出菜单加入到通讯录。

别的地方倒也罢了。假设在username中出现数字（手机注冊新浪微博的话username就是“手机用户xxxxxxxx”），版式会非常恶心。

经过測试在a标签中的长串数字不会识别为电话，于是给出现username但没有链接的地方嵌套一个无动作的a标签，暂时攻克了这个问题。

可是这样添加了额外的标签。代码的语义性变得非常差，并且对大段文字不能用这种方法。

今天无意中撞进Safari的官网，发现了safari有个私有meta属性能够解决问题：

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

官网的说明例如以下： How do I disable automatic detection of phone numbers in webpages? In Safari on iPhone, phone numbers are automatically detected and transformed into links that dial the phone number when tapped. If you have strings of numbers in your webpage that should not be automatically detected as phone numbers, you can choose to disable this feature on the entire page by adding the meta tag shown in Listing 12.

2、点击拨打

<a href="tel:电话号码">电话号码</a>

3、自己定义被识别的手机号码

被识别后也就是自己主动加了超链接，通过子级选择器定义a标签就可以

<div class="content">手机：1300000000</div>

.content a{color:#000;}