iPhoneの電話番号リンク

iPhone(safari)ではHTML上に電話番号と認識できる文字列があると、自動的にアンカーになり、クリックすると電話発信することができます。
便利なような気がします。

しかし、サイト構築の際に注意しておかないと意図せずアンカーのスタイルが適用されてしまい、レイアウトが崩れたり文字色が変わってしまうことになります。

このため、以下のコードをヘッダに記述することで、iPhoneで自動的に電話番号のアンカーになってしまう機能を無効化します。

 

では、電話番号を発信させるためにはどうするのか。
明示的にアンカータグを記述します。

06-000-0000

しかしこれでは残念なことに、PCでも電話番号がアンカーになってしまいます。
電話もかけれないのに。
いや、もしかしたらレアな用途で電話かけることができるかもしれません。
わからないけれど。

どちらにしても、スタイルシートでアンカーとスパンを出し分けましょう。
クラス”sm”はスマートフォンで表示、クラス”pc”はPCで表示するものとしています。



06-000-0000

 

逆に、テーマやテンプレートなどではよく電話番号のアンカーが無効にされています。
iPhoneで番号発信できない場合などにはチェックしてみてください。