コーヒー豆にこだわり始めたjyunzyです。
コーヒーミルを買って以来、色んなコーヒー店で豆を買うのが楽しみになりました。
さて、今回は電話番号のリンク設定について話をしたいと思います。
スマートフォンでWEBページを見ていると、電話番号をタップして電話がかけられるようになっている事がありますが、それは<a href=”tel:”>というリンク設定がしてあるため、かけられるようになっています。
スマホの時は便利なのですが、制作者からするとPC表示ではこのリンクを動作させたくないです。
そんな時はCSSのpointer-eventsを利用してみてください。クリック・タッチイベントを無効化してくれるので、PC用のCSSに書いてあげると便利です。
a[href^=”tel:”] {
pointer-events: none;
}
モダンブラウザなら問題なく動作するので、導入しやすいと思います。
ユーザーエージェントを利用してモバイルかPCかを判断する方法もありますが、ChromeやFirefoxなどがユーザーエージェントの情報を削減する話も出ているので、ユーザーエージェントを使わない方法も知っておくといいかと思います。
