電話番号のリンクをスマホのときだけ有効にするCSS
レスポンシブ対応でサイトやページを制作するとき。問い合わせ先の電話番号を記載することがよくあると思います。
PCでの表示時は電話番号を記載するだけで良いですが、スマホ表示のときはその電話番号をタップすることで電話をかけられるようにしたい。
今回は、そんなときにつかえるCSSを紹介します。
実装方法
例えば、下記のようなコードがあるとします。
<a href="tel:01234567890">012-3456-7890</a>この電話番号のリンクに対して、スマホ表示以外ではリンクを無効にします。CSSに下記を追記するだけでOKです。
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}後はメディアクエリと併用して、例えば768px以下はスマホ表示として設定している場合、CSSは次のようになります。
@media (min-width: 769px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
