2014年12月06日

スマホサイトでどうしても自動リンクがついてしまう時の対処法

   
スマートフォンには「自動リンク機能」があります。電話番号や時間の形式の文字列があると自動的にリンク形式に変換してくれる機能なのですが、制作サイドからすると意図しないリンクは無い方が良い事が多いため、自動リンク機能をオフにしておく事がよくあります。

ただ、この「自動リンク機能をオフにする」事が機能しないケースがあります。今回は自動リンク機能をオフにできない場合の対処法を書いていきます。

自動リンク機能をオフにするタグ

自動リンクをオフにしたい時はheadタグ内に下記metaタグを書きます。

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


これだけで、例えばiPhoneのsafariだと問題なく自動リンクがオフになります。ただ、ブラウザのアプリはsafariだけではありません。定番の「GoogleChrome」や、スマホでソースを確認できる「ScriptBrowser」など、色んなブラウザアプリがあるわけですが、これらのような「safari以外のブラウザアプリ」が曲者だったりするわけです。

format-detectionを無視する

アプリ側の問題のため詳細はわかりませんが、いわゆる「WebView」と呼ばれる、アプリ内に簡易ブラウザ機能を提供してくれるクラスが原因でformat-detectionの指定を無視してしまい、結果的に自動リンクになってしまう、という現象が生じてしまいます。

解決策

自身がアプリの開発者であればアプリ内部の改修で済むところですが、既存のアプリに対しては改修を行えません。HTML側での解決策としてはシンプルな解決策ではありませんが、下記のような方法があります。

1.inputタグで表示する
<input type="text" value="03-5843-9329" style="border: none;" readonly="readonly">


2.imgタグを挟む
03-<img src="dm.png" width="0" height="0">5843-<img src="dm.png" width="0" height="0">9329


どちらもHTMLの書き方としては微妙ですが、どちらかといえば1の方が自然でしょうか。
どうしてもという時だけですが、解決はできるかと思いますので、一つの方法として覚えておく程度なら役立つ場面もあるかと思います。

スマホサイトでどうしても自動リンクがついてしまう時の対処法でした。


posted by Liang Zhaohong at 22:25 | Comment(0) | TrackBack(0) | サイト制作全般 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。