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 を合わせて設定しています。
スマホ時に電話番号にリンクを設定するデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031