ライセススタッフが書くブログ。

iPhoneで数字を電話番号として認識させない最も簡単な方法

| Web制作のこと
iPhoneで数字を電話番号として認識させない最も簡単な方法

地味にハマりました。

 

あるコーポレートサイト制作の企業情報ページの概要部分をテーブルで作成し、電話番号とFAX番号を入力。

 

 

構築完了。

 

 

デバックでPC表示を確認後、iPhoneで企業情報ページを確認。

 

 

出た…。

 

 

電話番号やFAX番号の数字が電話番号として認識されて、タップで電話が掛けられるようになっている…。

 

 

iPhoneのSafariは、数字が並ぶと電話番号だと認識して、自動でアンカーが付いてしまいTELリンクになってしまいます。

 

 

別に電話番号なんだから、電話を掛けられるようになってても良いんですが、概要内は普通のテキストとして表示させたかった。何より、FAX番号まで電話番号認識されているのはまずい。

 

 

色々調べると、ヘッダーに

を挿入する方法を発見。

 

 

試してみると、確かに電話番号認識は回避されました。

 

 

が、しかし、サイト全てのページにある電話番号/FAX番号に効いてしまい、コンバージョンポイントや、お問い合わせページなどにある電話番号までもが無効に…。

 

 

ならばと思い、上記のmetaタグを生かしつつ、コンバージョンポイントや、お問い合わせページなどの任意の場所にだけ、

属性を!

 

 

んが、これも無効扱い。

 

 

調べていくと、上記のmetaタグは全てのデバイスのブラウザに対して万能ではなさそう。

 

 

HTMLやJava、PHPなどでデバイズの振り分け処理を行う方法も、この最終局面でやるのは面倒だし危険。

 

 

他、以下の泥臭い手段も全滅でした。

・数字を全部全角で打つ。

・数宇の前後にスペースを入れる。

・気が付かなかった事にする(嘘)。

 

 

5秒くらいで解消する方法はないものか…?

 

 

と、途方に暮れていたら、1秒で解決する方法がありました!

 

 

上記のmetaタグを取っ払い、電話番号認識させたくない数字と数字の間(ハイフンの部分)に、以下のタグを挿入!終わり!

 

 

(挿入例)

TEL. 03-<img width=”0″ height=”0″ />1234-<img width=”0″ height=”0″ />5678

FAX. 03-<img width=”0″ height=”0″ />1234-<img width=”0″ height=”0″ />5678

 

 

(表示例)

TEL. 03-1234-5678

FAX. 03-1234-5678

 

 

画像タグを仮想的に挟んで、連続した番号として認識させないようにしてるんですね。

 

 

これ、別に画期的なわけではなく(自分的には画期的!)、昔ながらの手法らしいです。知らなかった。

 

 




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る