【HTML/CSS】電話番号の発信用リンクをスマートフォンのみで使えるようにする方法

サイトを閲覧していると、会社概要やお問い合わせページに電話番号が記載されているものがあると思います。
サイトによって設定は違いますが、PC、スマホ関係なくすべての端末で電話の発信画面を開くパターン、スマホだけで発動するパターン、そもそも発動しないパターンといった3パターンに分けられます。
PCで発信を有効化しても…と思う方が多いと思いますが、（タブレットと）スマホ画面のみで有効化させることも可能です。CSSを数行追加するのみで設定可能なので、検討されている方は参考にしてみてください。

スマホサイズの画面でのみ発信リンクを発動させる方法

まずは、通常通り電話番号と発信リンク付きaタグを作成します。

<a href="tel:000000000000">0000-0000-0000</a>

次に、このHTMLに当てるCSSになります。

@media screen and (min-width: 768px){
a[href*="tel:"] {
    pointer-events: none; /*①アンカーのtelを無効化*/
    cursor: default; /*②アンカーのポインターをデフォルトにする*/
    text-decoration: none;
}
}

上記の記述を電話番号を記載したaタグに設定することで、PC・タブレット（ipad mini以上）のサイズで電話番号のアンカーを無効化することができます。※実際に画面幅を伸縮させると確認できます。
コメントアウトに記載のとおり、①「pointer-events:none;」でリンクアクションを無効化することができます。②はマウスカーソルをアンカーに合わせると指のアイコンになると思いますが、これを通常のポインター表示のままにすることができます。動作面では特に変化はありませんが、視覚の部分でクリックできないことを伝えることも大切です。