目次
はじめに
コーディング案件で、納品前のブラウザチェックをしているときにiPhoneのSafariで電話番号の部分だけ他のブラウザと色が違うということがよくあります。これは自動で<a>タグをタグを補完してしまうからです。
TEL：0000-00-0000
<p class="tel01">TEL：0000-00-0000</p>スマホのSafariで電話番号の色が変わってしまうことへの対策方法①
html側で<a>タグを追加してcssを指定する
ブラウザ側で<a>タグを保管させるのではなくHTMLで<a>タグを追加してcssを指定します。
<p class="tel02">TEL：<a href="tel:0000-00-0000">0000-00-0000</a></p>.tel02 a {
color: #191919;
} TEL：0000-00-0000
上記cssはあくまでも例で元々の<a>タグのスタイルが適用されるのでそれを消すようにcssを指定してください。
スマホのSafariで電話番号の色が変わってしまうことへの対策方法②
<head>タグ内にソースコードを追加する
<head>タグ内に下記ソースコードを追加します。
<meta name="format-detection" content="telephone=no">これは、ウェブページ上での電話番号の自動的なリンク化を無効にするためのメタタグです。このメタタグは通常、モバイルデバイスでウェブページを閲覧した際に、ウェブブラウザが自動的に電話番号をリンクに変換し、ユーザーがタップして電話をかけることができるようにする機能を制御するために使用されます。
ウェブページが電話番号を表示するが、タップによる電話発信を防ぎたい場合に役立ちます。たとえば、電話番号を純粋に情報として表示したい場合などに使用されます。
ウェブページが電話番号を表示するが、タップによる電話発信を防ぎたい場合に役立ちます。たとえば、電話番号を純粋に情報として表示したい場合などに使用されます。
