photo by:obihirorabbit

iPhoneの電話番号リンク

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

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

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

 

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

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

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

 

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

 

楽天市場

Amazon.co.jpアソシエイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)