当前位置

手机版网站中电话、手机号码添加链接

James Qi 在 2014年1月19日 - 16:54 提交
内容摘要:几年前我们开始为普通电脑版网站添加手机版本,当时查了一些资料,其中说到很多情况下,手机浏览器可以识别网页中的电话号码并自动添加链接,但也可以关闭这个功能并控制号码是否添加链接。这两年我们在添加手机版网......

  几年前我们开始为普通电脑版网站添加手机版本,当时查了一些资料,其中说到很多情况下,手机浏览器可以识别网页中的电话号码并自动添加链接,但也可以关闭这个功能并控制号码是否添加链接。这两年我们在添加手机版网站的时候,一般都没有去特别处理电话、手机号码的字段,就让手机浏览器自动来处理的。

  但考虑到自动添加链接这个功能误识别的问题(例如:漏掉识别合适的电话号码或者把传真号码也添加上链接等),人工来控制添加链接也许是个更好的办法。

  最近同事在全面排查网站问题的时候,又提出这个问题,我在网上搜索了一下,《Mobile Web Quick Tip: Phone Number Links》、《How to create click-to-call links for mobile browsers》等文章还比较有用,我整理几点:

  自动识别:

  iOS和Android上的浏览器自动可以识别号码并添加链接方便用户直接点击拨打,但手机号码有各种写法,例如是否有国内区号、是否有国际区号,是否用分隔符、是否用括号、是否用空格等,各种平台的各种浏览器在识别上不太统一;

  手工添加链接:

  下面这种加tel:或者tel://的方式与http://链接方式很接近,用得比较方便:

<!-- 在普通页面中嵌入 -->
<p>如果您想联系我们, 请<a href="tel:5555555">打电话给我们!</a></p>
<!-- 从一个图片链接 -->
<a href="tel://555-5555"><img src="phone.png" alt="现在就打电话!" /></a>
<!-- 兼容多种平台 (Android + iPhone) -->
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

  这个可以只用在手机版中,而电脑版中不用改变。

  另外,还有添加其它标准的方式,例如:

<a href="wtai://wp/mc;+1800229933">Call us free!</a>

  那就需要另外查更详细的资料。

  关闭自动识别:

  可以在页面head中添加标签来关闭自动识别功能:

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

  这个对iOS和Android平台都有效,关闭自动识别不影响人工添加的号码链接标记的使用。

  总之,虽说这只是一个小小的改变,还是情况比较复杂的,各种网站网页内容、各种手机平台、各种浏览器都是需要多测试的。

 

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。
验证码
本问题用于测试您是否为人类访问者,避免自动垃圾发贴。
图形验证
键入显示在图片中的字符