列出网站点击通话的电话号码的最佳方式

Question

在我建立的响应式网页上(基于twitter-bootstrap)我有许多不可见的元素,除非在较小的分辨率(即平板电脑和手机)上查看页面.

我发现 - 至少在运行OS7的iPhone上 - 电话号码最好保留为没有链接的号码.iPhone的检测数字格式的电话号码,增加了它自己的href和当你按下它数问你,如果你想叫它- 见截图1.

但是,如果附上我的文字或电话号码与电话的A HREF:标记(如建议被众多"专家"),当我点击链接,没有任何反应.我必须长按链接(按住它超过一秒钟),然后才能给我一个电话号码的不同选项 - 见截图2.

这可以克服吗？或者是否有更好的方法来列出电话号码,以便移动设备可以点击呼叫它们(以最少的步骤为最终用户)？

谢谢

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

<nav>
     <ul>
         <li class="mobile-only"><a href="tel:1800251800">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>

我已经在我的样式表中display:none;设置了.mobile-only,当@media (max-width:768px)到达时,我已经display:block;设置了.mobile-only(以及其他样式).

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

有什么想法吗？

Answer 1

该tel:方案于 1990 年代末使用，并于 2000 年初通过RFC 2806进行记录（该方案已于 2004 年被更彻底的RFC 3966废弃），并继续得到改进。支持tel:iPhone 并不是一个随意的决定。

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

或者，如果您想删除tel:iphone，您可以使用以下 jQuery 片段：

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