大阪のホームページ制作会社 株式会社TREVO
技術ブログ

スマホのみ電話番号をリンクを有効にする方法

2020.04.13.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

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以上で、電話番号リンクは無効になります。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり