レスポンシブデザインなウェブサイトで電話番号リンクをつけたけど、PCではクリックできないようにしたい。そんな時ってありませんか。

JavaScriptでUserAgentで判別したり色々手法はありますが、適当にかつ手っ取り早く実装したい時はCSSだけでやっちゃいましょう。

ただしpointer-eventsというプロパティを使うので、IEさんはIE11～しか対応してません・・・（CSS pointer-events (for HTML)）

HTML

HTMLは至極シンプル。

<a href="tel:0120-789-696">0120-789-696</a>

ただ書くだけ。

CSS

CSSも5行くらいで。メディアクエリーのサイズは定番のヤツで、768px以上の解像度だけpointer-eventsを無効にします。

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

IE10以下を無視すれば簡単に実装できるし、検索とかのロボットさんにも優しいはずだし覚えていれば便利だと思うんだ。