スマホのみ電話番号をリンクを有効にする方法 ホームページ制作 大阪の株式会社TREVO｜SEO対策・システム作成

CSSでスマートフォンのみ有効にする方法

CSSの場合はデバイスの横幅で判断してリンクを無効をします。
設定は簡単にできます。
 
例えば下記のコードの場合、このままだとPCでもリンクが効いてクリックできてしまいます。
<a href=”tel:0120838567″>0120-83-8567</a>
 
こんな時に便利なのが下記のプロパティになります。
 
pointer-events: none;
 
このプロパティはクリックを無効化するプロパティでレスポンシブデザインでは表示に役に立つプロパティです。
 

デバイスの横幅751pxでリンクの切り替えをする場合

@media (min-width: 751px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}

■0120-83-8567

横幅が751px以内で、電話番号リンクが有効になります。
横幅が751px以上で、電話番号リンクは無効になります。