iOS Safariで電話番号の自動リンクをformat-detectionで消す

  • HTML
  • iOS

この記事は、構成と文章の整理にAIを使っています。
あくまで読みやすくするための補助で、内容そのものをAIにすべて任せて書いているわけではありませんが、ところどころ相談しながら整えています。

何をしたかったか

モバイルブラウザで表示している電話番号っぽい文字列が、iOS Safari で勝手にリンク化(タップで発信)されるのを止めたかった。

対処法

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

iOS Safari はデフォルトで電話番号らしき文字列を検出してリンク化する。このmetaタグを指定すると、その自動検出を無効化できる。

他にもある属性

同系統でこういうのもある。

<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  • address=no: 住所
  • date=no: 日付
  • email=no: メールアドレス

効かないケースもある

<meta> だけでは効かないケースがあるらしい(実機未確認)。確実に潰したいなら対象テキストを <span> などでラップして直接リンク化を防ぐ、あるいは tel: リンクを明示的に使わない運用にする、という話もある。

補足: Androidには効かない

Android Chrome にはこのmetaタグは効かないことが多い。Android 側の自動リンクは WebView 内の TextView の autoLink 機能に由来していて、HTML の meta タグでは制御できない。そもそも Chrome 自体は電話番号を勝手にリンク化しないことが多く、問題になるのは主に WebView を組み込んだアプリ側。

結論

format-detection は iOS Safari 向けの仕組み。Android 側で電話番号リンクを消したいなら、meta タグではなくアプリ(WebView)側の設定か、CSS/JS 側での対処が必要になる。