手机图标仅显示在手机视图中

在我的网站上，我有一个手机图标，所以在手机视图中，他们可以点击手机图标并拨打某个业务电话，我不知道如何让它只出现在手机视图上。

<style type="text/css">
  #tel {display:none;}
  @media all and (max-width: 1000px) {
    #tel {display:block;}
  }
</style>
<div class="tel">
<a href="tel:555-555-5555"><img src="images/phone.png" /></a>
</div>