iPhone の Safari は、電話番号に表示される数字の文字列のリンクを自動的に作成します。IP アドレスを含む Web ページを書いていますが、Safari はそれを電話番号リンクに変換しています。ページ全体またはページ上の要素に対してこの動作を無効にすることは可能ですか?
23 に答える
Safari HTMLリファレンスによると、これは正しいことのようです。
<meta name="format-detection" content="telephone=no">
これを無効にしても電話リンクが必要な場合は、「tel」URIスキームを使用できます。
これがAppleのDeveloperLibraryの関連ページです。
私はゼロ幅ジョイナーを使用します‍
それを電話番号のどこかに入れるだけで、うまくいきます。BrowserStack (および電子メールの Litmus) でテストされています。
特定の要素の電話解析の外観を無効にするために、この CSS はトリックを行うようです:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }
最初のルールはクリックを無効にし、2 番目のルールはスタイリングを処理します。
私は同じ問題を抱えていました。データ検出器をオフにできる UIWebView のプロパティを見つけました。
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
これを追加してください、私はそれがあなたが探しているものだと思います:
<meta name = "format-detection" content = "telephone=no">
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 ];
}
// ...
ソース: PhoneGap-iOS で電話検出を無効にします。
私の経験は他の人が言ったのと同じです。メタタグ...
<meta name = "format-detection" content = "telephone=no">
... WebサイトがモバイルSafariで実行されている場合(つまり、Chromeを使用)は機能しますが、Webアプリとして実行されている場合(つまり、ホーム画面に保存され、Chromeなしで実行されている場合)は機能しなくなります。
私の理想的とは言えない解決策は、入力フィールドに値を挿入することです...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
境界線がnoneに設定されているにもかかわらず、iOSはフィールドの上にマルチピクセルの灰色のバーをレンダリングするため、理想的とは言えません。ただし、番号をリンクとして表示するよりはましです。
解決策を見つけたと思います:<label>要素の中に数字を入れてください。他のタグは試していませんが、属性<div>があってもホーム画面でアクティブのままにしました。telephone=no
以前のコメントから明らかなように、meta タグは機能していましたが、何らかの理由で、少なくともいくつかの条件下では、iOS の新しいバージョンでは機能しませんでした。私は4.0.1を実行しています。
私は、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) で動作します。
私はこれを自分でテストし、確かにエレガントなソリューションではありませんが、機能することを発見しました。電話番号に空のスパンを挿入すると、データ検出器がそれをリンクに変換できなくなります。
(604) 555<span></span> -4321
私は同じ問題を抱えていましたが、iPad Webアプリでした。
残念ながら、どちらも...
<meta name = "format-detection" content = "telephone=no">
または ...
0 = 0
9 = 9
... 働いた。
しかし、ここに3つの醜いハックがあります:
- 数字の「0」を文字の「O」に置き換える
- 数字の「1」を文字の「l」に置き換える
- 無意味なスパンを挿入します: 例:
555.5<span>5</span>5.5555
使用するフォントによっては、最初の 2 つはほとんど目立ちません。後者には明らかに余分なコードが含まれますが、ユーザーには見えません。
データからコードを動的に生成している場合、またはこの方法でデータを汚染できない場合は、おそらく実行できません。
でも、いざという時には十分。
リンクを削除したいのはなぜですか。オプションがあると非常にユーザーフレンドリーになります。
単に自動編集を削除したいが、リンクを機能させたままにする場合は、これを CSS に追加するだけです...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
<meta name = "format-detection" content = "telephone=no">メールでは機能しません: 準備している HTML がメール用である場合、メタタグは無視されます。
あなたがターゲットとしているのが電子メールである場合、これはあなたのためのさらに別の醜いがうまくいく解決策です:
リンクや自動フォーマットを避けたい 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 の縦向き/横向きの組み合わせごとにメディア クエリが必要になる場合があります。
私はしばらくこれに戸惑いましたが、最終的にそれを理解しました。サイトを更新したところ、リンクに変換される番号とそうでない番号がありました。数値が <fieldset> にある場合、数値はリンクに変換されないことが判明しました。明らかに、ほとんどの状況では正しい解決策ではありませんが、場合によっては正しい解決策になります。
<meta name="format-detection" content="telephone=no">アプリの index.html のメタ タグ ( ) で解決された Sencha Touch アプリの同じ問題。
それらを HTML エンティティとしてエンコードしてみることができます。
0 = 0
9 = 9
Mobile Safari 以外でも機能する私が使用するトリックは、HTML エスケープ コードと電話番号に小さなマークアップを使用することです。これにより、ブラウザが電話番号を「識別する」ことがより困難になります。
Phone: 1-800<span>-</span>620<span>-</span>3803
数字を個別のテキスト ブロックに分割する
301 <div style="display:inline-block">441</div> 3909
この回答は、2012 年 6 月 13 日現在のすべてに優先します。
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
色をテキストに一致するものに変更し、テキストの装飾により下線が削除され、ポインター イベントにより、ブラウザーでリンクのように表示されなくなります (ポインターは手に変化しません)。
これは、iOS およびブラウザーでの HTML メールに最適です。