電話番号のリンクをレスポンシブ対応にする方法
電話番号へのリンクは、普通にリンクと見なされます。
|
1 |
<a href="tel:012-345-6789">012-345-6789</a> |
しかし、パソコンやタブレット等で電話番号へのリンクがあっても、使えないし余分な機能ですよね。
パソコンやタブレットなどの表示で電話番号のリンクを貼らないようにし、スマホと見なされる画面幅のみ、電話番号のリンクを有効にするには、CSSに下記のように記入します。
|
1 2 3 4 5 |
@media screen and (min-width: 768px) { a[href^="tel:"] { pointer-events: none; } } |
これで、画面幅768px以上の場合は、電話番号のリンクが働きません。
是非、お試しください^^
公開日：2019年8月26日
最終更新日：2019年8月26日
