web-dev-qa-db-ja.com

Mobile Safariで電話番号のリンクを無効にする方法

IPhone上のSafariは、電話番号に表示される数字列へのリンクを自動的に作成します。私はIPアドレスを含むWebページを書いています、そしてSafariはそれを電話番号のリンクに変えています。ページ全体またはページ上の要素に対してこの動作を無効にすることは可能ですか？

iphonesafarimobile-safari
339
benzado

Safari HTMLリファレンス によると、これは正しいことのようです。

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

これを無効にしても電話リンクが必要な場合は、「tel」URIスキームを使用できます。

これがAppleのDeveloper Libraryの 関連ページ です。

676
lewinski

特定の要素の電話解析外観を無効にするために、このCSSはトリックをするようです：

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

最初のルールはクリックを無効にし、2番目のルールはスタイルを管理します。

36
Florian Grell

私は同じ問題を抱えていました。私はあなたがデータディテクタをオフにすることを可能にするUIWebView上のプロパティを見つけました。

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
32
catshow

これを追加し、私はそれがあなたが探しているものだと思います：

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

幅0のジョイナ&zwj;を使います

電話番号のどこかに置くだけで、うまくいきます。 BrowserStack（およびLitmus for Eメール）でテスト済み。

27
stickyuser

Webviewのためのソリューション！

PhoneGap-iPhone/PhoneGap-iOSアプリケーションの場合は、プロジェクトのアプリケーションデリゲートに次のコードを追加して、電話番号の検出を無効にすることができます。

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

source： PhoneGap-iOSの電話検出を無効にする 。

10
user788055

ページの一部で電話番号の検出を無効にするには、影響を受けるテキストをhref = "＃"のアンカータグで囲みます。あなたがこれをするならば、モバイルSafariとUIWebViewはそれをそのままにするべきです。

<a href="#"> 1234567 </a>
7
yodaisgreen

私は解決策を見つけたと思います：<label>要素の中に数を入れてください。他のタグを試したことはありませんが、<div>属性があっても、telephone=noはホーム画面上でアクティブにしたままにしました。

メタタグが機能したことは以前のコメントから明らかですが、何らかの理由でiOSの新しいバージョンでは、少なくともいくつかの条件下では壊れています。私は4.0.1を実行しています。

6
BobFromBris

href値としてjavascript: void(0)とともに<a>ラベルを使用することもできます。

次のような例
<a href="javascript: void(0)">+44 456 77 89 87</a>

6
diazwatson

私はiPad Safariが電話番号のリンクに変えることを主張したABN（オーストラリアのビジネス番号）を持っていました。提案のどれも助けにはならなかった。私の解決策は、数字の間にimgタグを入れることでした。

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

このクラスはimgタグの目的を文書化するためだけに存在します。

IPad 1（4.3.1）とiPad 2（4.3.3）で動作します。

4
mhenry1384

私は同じ問題を抱えていたが、iPadのWebアプリで。

残念ながら、どちらも...

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

また….

&#48; = 0
&#57; = 9

...働いた。

しかし、これは3つの醜いハックです。

  • 数字の "0"を文字の "O"に置き換える
  • 数字の "1"を文字の "l"に置き換える
  • 無意味なスパンを挿入してください：例えば555.5<span>5</span>5.5555

使用するフォントによっては、最初の2つはほとんど目立ちません。後者は明らかに余計なコードを含みますが、ユーザーには見えません。

Kludgyは確かにハックしており、データから動的にコードを生成している場合、またはこの方法でデータを汚染することができない場合は、おそらく実行不可能です。

しかし、ピンチで十分です。

4
mattstuehler

私の経験は他の人が述べたのと同じです。メタタグ...

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

... WebサイトがMobile Safariで実行されている（つまり、クロムあり）場合は機能しますが、Webアプリケーションとして実行されている場合は機能しません（つまりホーム画面に保存され、クロムなしで実行されます）。

私の理想とは言えない解決策は、値を入力フィールドに挿入することです...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

境界線がnoneに設定されているにもかかわらず、iOSではフィールドの上にマルチピクセルのグレーのバーが表示されるため、理想的とは言えません。しかし、それはリンクとして数を見るよりも優れています。

4
Alan M.

<meta name = "format-detection" content = "telephone=no">はEメールには機能しません。準備しているHTMLがEメール用のものである場合、メタタグは無視されます。

あなたがターゲットにしているものが電子メールであるならば、ここにya'llのためのもう一つの醜いけれども働く解決策があります：

リンクされたり自動フォーマットされたりするのを避けたいHTMLの例：

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

そして、魔法を起こすCSSは、

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

欠点：あなたはipad/iphoneの縦向き/横向きのコンボそれぞれについてメディアクエリを必要とするかもしれません。

2
cabrera

私はこれを自分でテストし、それがうまくいくことを確かめましたが、それは確かに優雅な解決策ではありません。電話番号に空のスパンを挿入すると、データディテクタがそれをリンクに変えることを防ぎます。

(604) 555<span></span> -4321
2
Jay

私が使っているトリックは、Mobile Safariだけではなく、HTMLエスケープコードと電話番号のちょっとしたマークアップを使うことです。これはブラウザが電話番号を「識別」することをより困難にする。

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
1
Phil LaNasa

Sencha Touchアプリの同じ問題が、アプリのindex.htmlのメタタグ（<meta name="format-detection" content="telephone=no">）で解決されました。

1
someone else

あなたはそれらをHTMLエンティティとしてエンコードすることを試みることができます：

&#48; = 0
&#57; = 9
1
Diodeus - James MacFarlane

私にもこの問題があります。Safariや他のモバイルブラウザはVAT IDを電話番号に変換します。したがって、ページ全体（またはサイト）ではなく、単一の要素でそれを回避するためのクリーンなメソッドが必要です。
私が見つけた可能な解決策を共有していますが、それは準最適ですが、それでもかなり実行可能です：番号の中にtel:リンクになりたくない&#8288;Word-Joinerの不可視文字 であるHTMLエンティティ。私はこの文字を何らかの意味の場所に置くことで、より意味的なものにしようとしました（少なくとも、ある種の）。 VAT IDについては、 その形式 に従って異なる数字のグループの間に配置することを選択しました。したがって、イタリアのVATについては次のように書きました：0613605&#8288;048&#8288;8電話番号に変換されません。

1
kaosmos

私はしばらくこれに混乱していましたが、ついにそれを考え出しました。私たちは私たちのサイトを更新し、いくつかの数字がリンクに変換されるようにしましたが、そうでないものもありました。 <fieldset>に含まれている場合、その番号はリンクに変換されません。ほとんどの場合、明らかに正しい解決方法ではありませんが、場合によっては正しい解決方法になります。

1
Oliver P

もう1つのオプションは、電話番号のハイフンを‑という文字で置き換えることです（U + 2011 'Unicode Non-Breaking Hyphen'）。

1
Daniel

番号をテキストの別々のブロックに分割します

301 <div style="display:inline-block">441</div> 3909
0
Kareem

この回答は、2012年6月13日現在のものすべてに勝っています。

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

色をあなたのテキストに合うものに変えなさい、テキスト装飾は下線を取り除き、ポインタイベントはブラウザのリンクのようにそれが見られるのを止める（ポインタは手に変わらない）

これは、iOSおよびブラウザでのHTML電子メールに最適です。

0
Vincent Tobiaz

リンクを削除したいのはなぜでしょうか。このオプションを選択すると非常にユーザーフレンドリーになります。

単純に自動編集を削除したいが、リンクを有効にしておきたい場合は、これをCSSに追加するだけです。

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}
0
Marc