Webサイトを制作していて、こんな経験はありませんか？
「PCではちゃんと住所が表示されているのに、iPhoneで見ると消えている…」
「クライアントから“住所が表示されていません”と言われたけど、コードにはちゃんと書いてあるのに…」
このような現象は、iPhone（iOS）の仕様によって起こることが多いです。
この記事では、Webサイトで住所が消える原因とその対処法を、初心者にもわかりやすく解説していきます。
結論：iOSの「データ検出機能」が原因
iPhoneのSafariやChromeには「データ検出（Data Detectors）」という機能があります。
これは、Webページの中にある住所・電話番号・メールアドレスなどを自動で認識し、リンクとして表示してくれる機能です。
この機能により、ユーザーが住所をタップするとマップアプリが開くなど便利な反面、Web制作側では以下のようなトラブルが起こることがあります。
- 住所の表示が一部消える
- 文字が青くなってリンクっぽくなる
- レイアウトやフォントが崩れる
これらは、iOSが自動的に住所をリンクに変換してしまうことが原因です。
対処法：iPhoneで住所が消えないようにする3つの方法
1. <meta>タグで自動リンク化を防ぐ
iOSに「自動リンク化をしないで」と伝えるには、<head>タグ内に以下のmetaタグを追加します。
<meta name="format-detection" content="telephone=no,address=no,email=no">- telephone=no：電話番号の自動リンク化を無効化
- address=no：住所の自動リンク化を無効化
- email=no：メールアドレスの自動リンク化を無効化
💡 特に「address=no」がポイントです！
2. CSSでリンクのスタイルを打ち消す
もし既にiOSによってリンクが生成されてしまっている場合は、CSSでスタイルを上書きすることで、見た目を整えることができます。
a[href^="http://maps.apple.com"] {
color: inherit;
text-decoration: none;
pointer-events: none;
}電話番号の場合
a[href^="tel:"] {
color: inherit;
text-decoration: none;
pointer-events: none;
}メールアドレスの場合
a[href^="mailto:"] {
color: inherit;
text-decoration: none;
pointer-events: none;
}3,spanタグで住所部分を囲んで制御する
HTML側であらかじめ対策をしておく方法として、spanタグで住所を囲むのも有効です。
<span class="no-detect">〒123-4567 東京都新宿区〇〇1-2-3</span>そして以下のようにCSSで指定します。
.no-detect {
display: inline-block;
text-decoration: none;
color: inherit;
}これにより、iOSによる自動リンク化が抑制され、見た目の崩れを防ぐことができます。
住所が消える原因と対策:まとめ
iPhone実機で見たときに入力した住所や電話番号が消えることがあります。
原因
「データ検出（Data Detectors）」という機能がiOSが自動的に「住所っぽい文字列」や「電話番号」を検出してリンクに変えているからです。
その結果、CSSのスタイルが上書きされたり、レイアウトが崩れたりすることがあります。
対策
- metaタグで自動的にリンク化されるのを防ぐ
- CSSでリンクのスタイルを打ち消す
- 住所部分を<span>タグで囲んで制御する
少し古いiPhoneでは自動リンク化が行われない場合もあります。iOSのバージョンにもよりそうですが、iPhone16では確認できました。
webサイトにとって、住所や電話番号はユーザーの信頼を得る大切な情報であると同時に、お店にアクセスする大切な情報です。
日本人のiPhoneシェアは約50%ともいわれています。しっかり表示できるように対策をしていきたいですね！
コメント