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

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

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

事前準備

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

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

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

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

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

・pcの時

 

・スマホの時