knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

iOS版Safariで郵便番号にリンクが設定される

format-detectionを利用

iOSSafariでは、電話番号だけでなく、IPアドレスや郵便番号にまでリンクが自動で貼られてしまうという性質があります。

しかも郵便番号に貼られたリンクをタップしても、特に何か起きるわけではないので、ユーザーの方を混乱させてしまう結果になります。

そこで、電話番号にはリンクを貼るが、それ以外のものにはリンクを貼らないような設定方法を行います。

まずmeta要素で、意味がある(とブラウザが判断する)数字にリンクを貼らないよう設定します。

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

これで郵便番号だけでなく電話番号、IPアドレスなどにリンクが貼られなくなりました。 そして、電話番号の部分にのみリンクを貼ります。

a要素のhref属性で指定します。 形式は番号の先頭に「tel:」という文字列を追加して、リンク先に電話番号を書くだけです。

<a href="tel:03-0000-0000">03-0000-0000</a>

この方法で、電話番号にのみリンクが貼られます。

Androidでも対応可能です。

※ただし、PCでは通常のリンク同様にクリックできてしまうので、別途対応が必要になります