電話番号のリンクをスマホ時のみ有効にする方法

MARKLEAPS

2021.10.18

電話番号をタップすると電話をかけられるように、という要望は多いと思います。
その際、<a href=”tel:0120-XXXX-XXXX”>0120-XXXX-XXXX</a>という形で指定しますが、
スマホではタップのみで電話をかけることが出来て便利な反面、
パソコンでもクリックができてしまいます。

そこで、クリックでのリンクをスマホでのみ有効にする方法をご紹介します。

事前準備

headに自動リンク機能を無効化するmetaタグを入れておきます。

<meta name="format-detection" content="telephone=no" />

1	<meta name="format-detection" content="telephone=no" />

※iPhoneのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっていますが、電話番号以外の、注文番号などの数字で校正された文字列もリンク扱いになってしまうため、それを防止する記述です。

電話番号にリンクを指定する

html内の電話番号部分にリンクを指定します。

<a href="tel:0120-XXXX-XXXX">0120-XXXX-XXXX</a>

1	<a href="tel:0120-XXXX-XXXX">0120-XXXX-XXXX</a>

cssでスマホ時のみ電話番号のリンクを有効にする

・pcの時

a[href^="tel:"] { /* a href がtel:で始まるものに対して */
    pointer-events: none; /* マウスイベント（hover , click など）を無効に */
}

a[href^="tel:"] { /* a href がtel:で始まるものに対して */

pointer-events: none; /* マウスイベント（hover , click など）を無効に */

}

・スマホの時

@media screen and (max-width:768px){
	a[href^="tel:"] { /* a href がtel:で始まるものに対して */
		pointer-events: auto; /* マウスイベント（hover , click など）を有効に */
	}
｝

@media screen and (max-width:768px){

a[href^="tel:"] { /* a href がtel:で始まるものに対して */

pointer-events: auto; /* マウスイベント（hover , click など）を有効に */

}

｝

CSS

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法