電話番号のリンクをスマホのときだけに効かせたい

はじめに

電話番号のリンクを付けたものの、pcにもリンクが付いて逆に不便になりますね

ちなみに電話番号のリンクはこちら

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

スマホだけに対応するには？

メディアクエリーでスマホサイズ以上（768px）の解像度のときに
pointer-eventsをnoneします

@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

これでaタグ等の動作を無効にさせます

メディアクエリー使って↑のコード書いたのにpointer-eventsがnoneしない時

aタグをdisplay: block;かdisplay: inline-block;にしてみてください

出来上がり

See the Pen 電話番号のリンクをスマホのときだけに効かせたい by naoko kikuchi (@kikuchi) on CodePen.

参考サイト

レスポンシブっぽくCSSだけで電話番号リンクをスマホにだけ適用する方法