電話リンク（href=”tel:”）をスマホでのみ効くようにする

電話番号をタップして電話をかける、スマートフォンでウェブサイトを見る人向けに当然必要となります。

が、ものぐさなコーディングで、パソコンでもリンクがクリックできる状態にしていると、お客様から「なんか電話番号クリックしたらエラー出るんですけど！？」と怒られること必至です。

そんなうるさい時は以下のCSSを設定しましょう。

パソコンで閲覧しているときだけ、「tel:＊＊＊」を設定しているリンクを無効にしてくれます。

ただしdisplayを必ずinline-blockかblockにしましょう。inlineのままではIE11でクリックできてしまい「なんか電話番号（略」となります。

@media screen and (min-width: 768px) {
        a[href^="tel:"] {
            pointer-events: none;
            display:inline-block; //またはblock
        }
}

※ブラウザサイズで判定しているため、ブラウザサイズを768pxより小さくすると、パソコンでもクリックできます。