マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録
iPhoneやSafariで数列が勝手に電話番号になってしまうのを無効にする方法
iPhoneやSafariでは数列を自動的に電話番号として発信が出来るようにしてくれる機能があります。
その数列が電話番号であれば便利な機能ではあるのですが、意図せず数列が電話番号として発信できてしまうは、多くの場合大きなお世話です…。
その仕様を無効化する方法をメモしておきます。
電話番号として発信ができなくなる2つの方法
私は基本的にこの機能は大きなお世話なことが多いので、①の方法で対応することが多いですが、場合によっては②の方法が合うケースもあるので使い分けるのが良いと思います。
①電話番号は自分で設定するのでデフォルトとして自動電話発信付与機能をオフにする
基本的にはこちらで対応することが多いですが、要は『数列があっても自動で電話番号として判断しないでね』っていう方法です。
下記metaダグを<head></head>内に記述するだけでOK。
<meta name="format-detection" content="telephone=no">
これで数列には全て電話発信機能は付与されなくなります。
こちらが<a href=”tel: 1234567890″>と指定しない限りは電話番号として発信はできなくなります。
②この数列は電話番号ではないと各数列ごとに指定する（クリック/タップ出来なくする）
『これは電話番号じゃないですよ』と数列に指定する方法です。
正確にはクリック/タップを出来なくするという方法ですね。
記述が多くなるので基本的に「自動電話発信付与機能を使用することが多い場合」以外はあまり使わないかなと思います。
<p class="not-tel">1234567890</p>
.not-tel a[href^="tel:"] {
color: inherit;
text-decoration: none;
pointer-events: none;
}
iPhoneやSafariでは<a href=”tel: 1234567890″>のようなリンクタグが自動で追加されてしまうので、CSSではa[href^=”tel:”] にスタイルを書くようにしています。
colorで色を変化させず、
text-decorationでhoverしてもアンダーラインが出ないようにし、
pointer-eventsでクリック/タップを無効化しています。
要はhoverしてもクリック/タップしても何も起こらないようにしているということですね。
個人的には①を使いますが今後のためにメモしておきます。
マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録ブログです。
基本は過去わからなくて悩んだコーディングや諸々の設定方法などをメモ代わりに書き留めています。
ウェブコーディングやワードプレスの勉強中の方や同じ問題で悩んでいる方のお力になれたら嬉しいです。
