iPhoneで電話番号の表示が崩れる原因と解決方法

2025.12.25 ｜

制作Note

コメントはまだありません

Webサイトを制作していて、PCのブラウザでは問題なく表示されているのに、iPhoneの実機で確認すると電話番号の表示がおかしくなった経験はありませんか？

今回は、iPhoneのSafariで電話番号の表示が崩れる原因と、その解決方法をご紹介します。

発生した問題

PCブラウザの検証ツールでは正常に表示されていた電話番号が、iPhoneの実機では以下のような問題が発生しました。

電話番号に角丸の背景が勝手に付く
テキストが重なって表示される
意図しないスタイルが適用される

原因

iPhoneのSafariには、電話番号を自動検出してリンク化する機能が搭載されています。

この機能により、電話番号として認識されたテキストに対して、Safariが独自のスタイル（青色のリンク、角丸背景など）を自動的に適用してしまいます。

これがPCブラウザとの表示差異の原因でした。

解決方法

方法1: メタタグで電話番号の自動検出を無効化

最もシンプルな解決方法です。HTMLの<head>内に以下のメタタグを追加します。

<meta name="format-detection" content="telephone=no">

まずはこれだけで、Safariの電話番号自動検出機能が無効になり、意図しないスタイルの適用を防げます。

さらに: 電話リンクを設置する場合

メタタグで自動検出を無効にしつつ、タップで電話発信できるようにしたい場合は、aタグを使用します。

ただし、aタグを設置すると再び表示崩れが発生することがあります。その場合は、CSSでスタイルをリセットする必要があります。

グローバルCSSに追加

a[href^="tel:"] {
  color: #7ab6a1 !important; /* 任意の色を直接指定 */
  text-decoration: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

ポイント: inheritではなく色を直接指定する

当初はcolor: inherit !important;で親要素の色を継承しようとしましたが、文字色が白になってしまう問題が発生しました。

他のCSSやダークモードの影響で、意図した色が継承されない場合があります。確実に色を適用するには、inheritではなく色を直接指定することをおすすめします。

HTMLの記述例

※下記ではTailwindCSSを使用

<div class="text-[#7ab6a1] mt-8">
    <p class="text-base leading-normal mb-1">
        ご相談窓口（9:00～18:00）
    </p>
    <a href="tel:0359425260" 
       class="text-[2.4rem] font-semibold leading-tight">
        03-5942-5260
    </a>
</div>

iPhoneで電話番号の表示が崩れる場合は、以下の手順で解決できます。

メタタグを追加して電話番号の自動検出を無効化
電話リンクを使う場合はCSSでスタイルをリセット
color: inheritではなく色を直接指定する

PCのブラウザ検証ツールだけでは気づきにくい問題なので、スマートフォン実機での確認を忘れずに行いましょう。

参考

format-detectionメタタグは、電話番号以外にもemailやaddressの自動検出を制御できます
Tailwind CSSで!importantを付けたい場合は、クラス名の先頭に!を付けます（例: !text-[#7ab6a1]）

制作Note