携帯を意識して設置したtelボタンをメディアクエリの判別で動作するか決めるにはどうするのが適切でしょうか？

Question

<a href="tel:[phone]">0000-00-0000</a>

をユーザーエージェントで動作・非動作の判別をさせるのは
参照
参照
で指摘され、自分なりに考えた末に適切でないという結論には至ったのですが、
さて今の自分にユーザーエージェント以外の指定でゆだねられるかといわれると、実現が極めて困難です。

後学のためにサーバー指定法も学ぶべきですが、なにより今は時間がないため、
ユーザーエージェントの中のメディアクエリで判断させようと思いました。

論点は、メディアクエリで設定する際、どんなソースが参考・適切になりますか？ということです。
お願いします、教えてください。

---

これで設定すると開発者ツールで開いた際は動作するようになるのが痛いところですが、今現在は仕方ないです。
精進します。

Answer 1

<a href="tel:[phone]">0000-00-0000</a><span class="tel-number">0000-00-0000</span>

@media only screen and (max-width: 767px) {
  a[href^="tel:"]  {
    display: inline;
  }
  .tel-number {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  a[href^="tel:"]  {
    display: none;
  }
  .tel-number {
    display: inline;
  }
}

この記述をしようと思います。