CSSでスマホ時のみ電話番号にリンクを設定する

スマホでの閲覧時のみ電話番号にリンクを張りたいということがあったので、CSSのメディアクエリで判別して一定の画面幅以下の時にリンクを張る方法をメモ。

サンプルコード

HTMLでは普通にリンクを設定します。

<a href="tel:0000000000">00-0000-0000</a>

CSSで画面幅の広い場合(今回は768px)にリンク自体を無効にして、装飾を外します。

@media screen and (min-width: 768px), print {
	a[href^="tel:"] {
		color: black;
		text-decoration: none;

		display: inline-block; /* IE用 */
		pointer-events: none;
	}
}

基本的にリンクの無効はpointer-events: none のみでよいのですが、aタグがinlineの場合にIEでpointer-eventsが効かないようだったので、display: inline-block を合わせて設定しています。
スマホ時に電話番号にリンクを設定するデモページ