为移动用户更改 jquery 代码

Question

我刚刚推出了我的新网站 - mollycampbelldesign.com

虽然它还不能适应移动用户，但我决定启动网站并继续前进。到目前为止唯一的问题是左上角的电话图标 - 现在您只能通过单击电话图标来切换电话号码。我这样做是为了让移动用户可以在不让框滑出的情况下单击电话#。但是当您在桌面上查看时，如果能够单击整个数字框使其消失，那就太好了。有没有办法让移动用户获得一组代码，而桌面用户获得另一组代码？

HTML 代码：

<div class="call-button"><p>Call Now: <a href="tel:8013827471">801-382-7471</a></p> <img src="/wp-content/themes/boilerplate/images/phone.gif" alt="Call Now"/></div>

JS代码：

$(document).ready(function() {
$(".call-button img").toggle(
   function() {
     $(".call-button").animate({ left: "0" }, 1000 );}, 
   function() { 
    $(".call-button").animate({ left: "-225px" }, 1000 );
  });
});

Answer 1

这是一种快速而肮脏的方法：

var isTouchDevice = "ontouchstart" in window;
if(isTouchDevice){
   //do mobile stuff
}