在网站上列出电话号码以进行点击通话的最佳方式

Posted 2023-02-24

【中文标题】在网站上列出电话号码以进行点击通话的最佳方式

【英文标题】：the best way to list a phone number for click-to-call on website

【发布时间】：2014-09-06 13:57:59

【问题描述】：

在我构建的响应式网页上（基于 twitter-bootstrap），我有许多不可见的元素，除非在较小的分辨率（即平板电脑和手机）上查看该页面。

我发现 - 至少对于运行 OS7 的 iPhone - 电话号码最好保留为没有链接的数字。 iPhone 将号码格式检测为电话号码，添加它自己的 href，当您按下该号码时，它会询问您是否要拨打它 - see screenshot 1。

但是，如果我将我的文本或电话号码包含在带有 tel: 标记的 a href 中（正如许多“专家”所建议的那样），当我点击链接时，什么也没有发生。我必须长按链接（按住它超过一秒钟），然后它才会为我提供不同的电话号码选项 - see screenshot 2。

这可以克服吗？或者有没有更好的方法来列出电话号码，以便移动设备可以点击拨打电话（最终用户只需最少的步骤）？

谢谢

编辑： 经过进一步的页面测试，我发现<a href="tel:xxxxxxxx">call link</a> 工作正常 - 除了它在我的页面使用的导航菜单中。 该网站在移动时切换到下拉式菜单，并且它位于这个无序列表的顶部，我放置了我的呼叫链接。 例如。

<nav>
     <ul>
         <li class="mobile-only"><a href="tel:[phone]">Call now on <i class="icon-phone"></i> 1800 25 1800</a></li>
         <li><a href="#section-home" class="active">Home</a></li>
         <li><a href="#our-team">Team</a></li>
         <li><a href="#our-services">Services</a></li>
         <li><a href="#contact-section">Contact</a></li>
     </ul>
</nav>

我在样式表中为.mobile-only 设置了display:none;，当达到@media (max-width:768px) 时，我为.mobile-only 设置了display:block;（以及其他样式）。

所以我认为导航栏中的某些内容或用于在正常模式和移动模式之间切换导航栏的代码正在阻止我的呼叫链接正常工作。

有什么想法吗？

【问题讨论】：

This works fine for me on ios 7 on iPhone。你能找到真正重现你的问题的最短的代码吗？

【参考方案1】：

tel: 方案是 used in the late 1990s，并在 2000 年初与 RFC 2806（在 2004 年被更彻底的 RFC 3966 淘汰）和 continues to be improved 一起记录。在 iPhone 上支持tel: 并不是一个武断的决定。

我建议您开始在您的页面上包含格式正确的 tel: URI（不嗅探用户代理），然后等待世界其他地方的手机赶上来。

或者，如果你想为 iPhone 删除 tel:，你可以使用这个 jQuery sn-p：

 //if iPhone
 jQuery('body').on('click', 'a[href^="tel:"]', function() 
         jQuery(this).attr('href', 
             jQuery(this).attr('href').replace(/^tel:/, ''));
 );