在移动设备上放置一个“呼叫我们”按钮，以拨打该号码[重复]答案

【问题标题】：Place a "Call Us" button that dials the number on mobile devices [duplicate]在移动设备上放置一个“呼叫我们”按钮，以拨打该号码[重复]
【发布时间】：2014-07-11 03:09:16
【问题描述】：

我需要在我的网站上放置一个“呼叫我们”按钮，当点击该按钮时应该在移动设备上拨打一个号码。现在，我知道这可以通过致电我们来完成

问题是，当我在桌面上使用 Firefox 打开网站并单击按钮时，会出现“tel”与任何程序无关的错误。

因此，我希望桌面访问者在单击此按钮时重定向到 /contact-us/

谁能建议我可以切换黑白移动和桌面功能。

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用媒体查询仅在移动设备屏幕上显示“致电我们”按钮。这是预防问题的最简单方法。

.call-us{ display:none; }
@media only screen and (max-width: 40em) {
  .call-us {
    display: block;
  }
}

您还可以使用modernizr's mq 函数在tel:XXXXXX 和/contact-us/ 之间切换href 属性：

if (Modernizr.mq('only screen and (max-width: 40em)')) {
  $('.call-us').attr("href", 'tel:XXXXXX');
}

这只是一个桌面优先的例子，我不知道它是否适合你的代码。

为什么我要先做桌面而不是先做移动设备？ 因为联系我们的链接总是有效的，但电话却不行。因此，万一切换失败，用户仍然可以获得不错的用户体验。

【讨论】：

【解决方案2】：

你可以使用 jQuery remove 方法。

调用 btn：

<div> <a class="call-btn" href="contact-us.html"> Call Us </a> </div>

JQuery 在正文上：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(window).resize(function (){

if ( $(window).width() < 600 ) {

$('a.call-btn).remove();

}
})

</script>

【讨论】：