スマホで数字をリンクにさせない方法

コーディングをしていて、連続した数字を入れると自動的にリンクになってしまうという現象が起こります。
これはスマートフォンに限定した現象です。
この現象に対処するためには、head内にある記述をする必要があります。
html
1 |
<meta name="format-detection" content="telephone=no"> |
このコードを記述することで、スマートフォンでも不本意な電話機能を防ぐことができます。
電話番号のリンクにしたい場合
上記のコードで連続した数字で電話がかかることを防ぐことができるようになりましたが、では逆にタッチしたら電話かけれるようにしたい場合はどのようにしたら良いのでしょうか?
html
1 |
<a href="tel:ここに電話番号を入れます"></a> |
これでタッチしたら電話をかけれるようになります。
電話がかけられるというのをわかりやすいようにした方が良いですよね。
css
1 2 3 |
a{ text-decoration: underline; } |
これで電話番号に下線が入ってリンクだということがわかります。
まとめ
・連続した数字をリンクにしたくない場合は、<meta name=”format-detection” content=”telephone=no”>をhead内に記載する。
・電話番号をリンクにしたい場合は、<a href=”tel:ここに電話番号を入れます”></a>でリンクにすることができる。
サイト作成していると必ず遭遇する場面ですので覚えておいて損は絶対にないでしょう。