More than 5 years have passed since last update.

スマホの見た目のときだけ電話番号のリンクをアクティブにする

Posted at 2020-08-19

HTML

<a href="tel:0120-000-000" class="telephone">TEL:0120-000-000</a>

これだけだとPCのブラウザでも電話番号のリンクがつながってしまうので、スマホだけにする
メディアクエリでウィンドウ幅769px以上の場合はリンクを無効にするCSSを設定する

CSS

@media screen and (min-width: 769px){
 a.telephone [href*="tel:"] {
    cursor: default;
    pointer-events: none;
    text-decoration: none;
 }
}