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

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

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

HTML

HTMLは至極シンプル。

ただ書くだけ。

CSS

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

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

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.