最近在工作中,遇到了一个如下的问题 :
在某个购物网站上(公司提供技术支持),对某些最近新添加的产品,用户无法加入到购物车中!经统计分析,所有报告这个异常的用户,均是使用 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>