Safari on iPad 上的一个特性

最近在工作中，遇到了一个如下的问题 ：

在某个购物网站上（公司提供技术支持），对某些最近新添加的产品，用户无法加入到购物车中！经统计分析，所有报告这个异常的用户，均是使用 ipad 进行购物的！

对任何到手的问题，作为技术支持的我们，首要的是重现问题， ok，申请到公司的测试 ipad，点击进入最新的几个产品，点击 "Add to Bag" 按钮，nothing happens！ 后面就是十分痛苦的定位问题的过程！ 最后我们将问题细化到如下的程度 ：

对于最近新添加的产品，在 ipad  的 Safari 浏览器上，无法添加到购物车， 而ipad 上的 UC 或者 Chrome 没有相应问题！

毫无悬念，这是 Safari 浏览器引起的一个问题！经过查看html源代码 (iPad中如何查看Safari页面源代码） , 我发现了如下的 json 代码 ：

在其他浏览器中的情况为 :

{"catentry_id" : "1055565",
	"Attribute" : {
						
						"Colour Description_Micro White/purple Stripe" : "1",
						"Size Description_06" : "2"
	}

在iPad中 safari 上的情况为 ：

{"catentry_id" : "<a href="tel:1055565">1055565</a>",
	"Attribute" : {
						
						"Colour Description_Micro White/purple Stripe" : "1",
						"Size Description_06" : "2"
	}

一个正常的 catentry_id 值，活生生被 safari 当成了 电话号码来处理！ 最后经过搜索，得知，这是 iPad （包括 iPhone）上 Safari的一个特性，就是电话号码自动识别机制！移动设备上的 Safari 从服务端请求过来html代码后，在渲染的过程中，会默认对数字串进行处理（长度 >= 7, 上限未测）, 所有这种数字串 ， 均会被自动添加上例显示的 "tel" link,这样，在页面上，当用户touch到这些数字时，可以直接 "Add to Contact"， 免去了先要记住号码，然后切换到拨号器，进行拨打的麻烦！！

说实话，这是一个优秀的功能，但是，对于我们这个应用，就会引起极大的问题 （Apple 总是为用户想太多）！ Safari 也提供了如下的 meta tag 来禁用这个功能 ：

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

这样，当前页面所有数字均不会被进行自动转换处理了，如果你仍然想让某个确实为电话号码的数字串有这种特效，可以将这个字符串直接放入 “tel” link 中 ：

<a href="tel : phone number">phone number</a>