各ブラウザ毎にユーザーが利用しやすいようにする為、電話番号やメールアドレスなどを自動的にリンク(aタグ)化する機能が備わっています。
便利な反面、かえって不便になったり不具合を引き起こす事もありますのでこれらを無効にするやり方を紹介します。
電話番号を無効化するmetaタグformat-detection
スマートフォンやタブレットで電話番号が自動的にリンク化する場合があります。
主にiOSのsafariで有効とされていますが、これを無効化するには以下のタグを<head>内に記述します。
<!-- head内に記述 -->
<meta name="format-detection" content="telephone=no">※Androidでは記述してもしなくてもリンク化してしまう場合があるようです(こちらでは確認できず)。その場合の対処方は後述します。
メールアレスや住所も合わせて無効化する
Androidでは電話番号の他にも、メールアドレスや住所もリンク化してしまう事があるようです。
その場合は先程のmetaタグに追加して以下のように記述します。
<!-- head内に記述 -->
<meta name="format-detection" content="telephone=no, email=no, address=no">※Androidでは記述してもしなくてもリンク化してしまう場合があるようです(こちらでは確認できず)。その場合の対処方は後述します。
無効化が効かない場合の対処法
ブラウザやOSのバージョン等によっては、自動リンク化したりしなかったり、無効化が効かなかったりする場合があるようです。
その場合は面倒ではありますが無効化したい部分に以下のCSS(クラス化して汎用できるように)を追加してあげる事で無効化できるようになります。
.link_disable {
pointer-events: none;
}さいごに
いかがでしたでしょうか。
一部検証できない部分もあり未確定な情報ではありますが、もしこういった現象が実際に起こった場合には何かの助けになれればと思っています。
