saber 酱的抱枕

Fly me to the moon

10/11
2015
学习

手机网页上拨打电话的tel链接

在手机网页上拨打电话的链接是tel:链接,形如:

<a href="tel:01088888888"></a>

今天在使用中遇到了一些问题,记录下来:
1.电话号码中间不要加分隔符,如tel:010-88888888是不行的。
2.在某些小米手机自带的浏览器中(也许不是所有miui版本上都这样),电话所在的这个a标签不能有target属性,例如下面的例子会导致错误链接:

<a target="_blank" href="tel:01088888888"></a>

3.iphone上的Safari默认会把电话号码的数字识别为电话号码,此时点击这串数字可拨打电话,同时数字的表现形式变得形同一个a标签。为了防止这个问题,可以加上以下meta信息:

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

评论里提到QQ浏览器了,它有个缺陷。如果你在css中写了句通用的a标签的颜色:

a{color:#fff;}

这是没卵用的,如果你不对一个a标签在css内精准选择它并为其指定颜色,或者没给它在行内样式设置颜色,QQ浏览器就把它显示为紫色,就像电脑上被点击过的链接的颜色一样。很难看。
UC浏览器连rgba颜色都不支持。
ps:又发现了miui自带的浏览器的一个奇葩问题。同事设置某处字体大小的时候,css选择器里面使用了b这个标签,结果在miui自带浏览器上显示的始终是浏览器的最小字号。最后终于发现了这个问题,不使用b标签做选择器,问题解决了。

手机网页上拨打电话的tel链接

    1. saber 文章作者
      Google Chrome 45Google Chrome 45Windows 7 x64 EditionWindows 7 x64 Edition

      手机有多个是最好的
      然后更坑爹杂的是浏览器的兼容性问题
      我每次排版手机站,基本都用火狐 chrome uc qq浏览器(这四个都是手机上的)看一遍,总是不会完全一样。主要是复杂地方的些许错位问题。所幸大部分还不会非常严重,我也就视而不见了。
      最好的是我爹的chrome浏览器,我在电脑上排版时看到的是什么样,在手机上也是什么样。qq手机浏览器在版面呈现上也较为理想,很少出问题。uc比较凑合,虽然是个渣(rgba颜色都不支持),偶尔会出现无需理会的小小错位。火狐一般不出问题,一出就是奇葩问题……这次就遇到了奇葩的事情。最后也没能修复,不管了。

      回复