web-dev-qa-db-ja.com

iPhone / iOSで青い電話番号のスタイルを削除するにはどうすればよいですか。

IPhoneで表示したときに電話番号からデフォルトの青いハイパーリンクの色を削除する方法はありますか？追加する特定のMobile SafariタグまたはCSSが好きですか。

私は数のためにこれを持っているだけです：

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

ハイパーリンクはありませんが、iPhoneはこのテキスト番号をハイパーリンクとして表示します。私は一部のWebサイトでこのレンダリングの問題を抱えていますが、これが発生している理由がわかりません。

私はこの記事を読みました：

モバイルHTMLのレンダリング番号

しかし、それが唯一可能な解決策でしょうか。

htmlioscssmobile-safari
185
Reno

2つの選択肢…

1. format-detectionメタタグを設定します。

電話番号の自動フォーマットをすべて削除するには、これをhead文書のhtmlに追加します。

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

もっと見る アップル固有のメタタグキー 。

注：これらの番号を含むページに電話番号がある場合は、手動でリンクとしてフォーマットしてください。

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2.メタタグを設定できませんか。 cssを使いたいですか？

2つのcssオプション：

オプション1（Webページに適しています）

このcss属性セレクターを使用して、hrefで始まるtel値を持つリンクをターゲットにします。

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

オプション2（HTML電子メールテンプレートに適しています）

あるいは、HTML形式の電子メールのようにメタタグを設定できない場合は、電話番号をリンク/アンカータグ（<a href=""></a>）で囲み、次のようにCSSを使用してスタイルを設定し、必要な特定のプロパティを調整できます。リセット：

a[x-Apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

特定のリンクをターゲットにしたい場合は、リンク上のクラスを使用してから上記のCSSセレクタをa[x-Apple-data-detectors].class-nameに更新します。

393
Beau Smith

David Thomasによる以前の提案を詳しく述べるために、

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

あなたのcssにこれを加えることは電話番号の機能性を残すが下線を取り除きそしてあなたがもともと使っていた色と一致する。

私は自分の答えを投稿することができますが、私は他の誰かに返事をすることはできません..

159
Silverback

電話番号の機能をそのまま使用したいが、表示目的で下線を削除したいだけの場合は、他のリンクと同じようにリンクのスタイルを設定できます。

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

クラスが電話番号のリンクに適用されることを示唆する文書を見たことがないので、リンクにクラス/ IDを追加する必要があります欲しい異なるスタイルにします。

あるいは、次のようにしてリンクのスタイルを設定できます。

a[href^=tel] { /* css */ }

これはiPhoneには理解されていて、他のUAには適用されないでしょう（私の知る限りでは、おそらくAndroid、Blackberryなどusers/devsはコメントできます）。

28
David Thomas

この質問がGoogleで見つかった場合、Appleが自動的に電話番号を設定するので、電話番号をリンクとして扱うだけです。

あなたのHTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

あなたのCSS

#phone-text a{color:#fff; text-decoration:none;}
12
sammi

ここに掲載されているほとんどの解決策が別の問題を引き起こす前に、電話アイコンがオンになっているサイトでtel：リンクを使用しているので。

私はメタタグを使いました：

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

これはtel：linksサイト全体のリンク先を指定することと組み合わせて使用​​します。

関連するtel-linkを隠すので、cssを使うことは本当に選択肢ではありません。

9
Valross.nu

古い質問ですが、上記の答えのどれもが私にはよくありませんでしたので私はそれを解決した方法

リストに電話番号があります。

<li class="phone_menu">+555 5 555 55 55</li>

css：

.phone_menu{
  color:orange;
}

しかしiPad/iPhoneでは黒だったので、これをCSSに追加したばかりです。

.phone_menu a{
  color:orange;
}
5
Marko

電話番号の真ん中に隠されたオブジェクトを追加して、単純なトリックが私のために働いた。

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

これはIOSのための電話番号カラーを無効にするのを助けます。

5
Arkadas Kilic
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
3
Ross

この話題のBeau Smithによると、 iPhone/iOSで青い電話番号のスタイルを削除する方法は？

このようにあなたのリンクのhref属性に "tel："を適用するべきです：

<a href="tel:5551231234">555 123-1234</a>

それは電話番号文字列に追加のスタイルとDOMを削除します。

3
SequenceDigitale.com

<meta name="format-detection" content="telephone=no">を使用してフォーマット検出を削除する必要はありません。タグを固定するのではなく、任意のタグで電話番号を使用してスタイルを変更してください。例：span { background:none !important; border:0; padding:0; }

2
Neetu

私は行ったり来たりしています

1。

    <a href="tel:5551231234">

2。

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

デスクトップとiPhoneで同じコードを機能させようとしています。問題は、最初のオプションを使用してデスクトップブラウザからクリックするとエラーメッセージが表示され、2番目のオプションを使用するとiPhone iOS5のタブツーコール機能が無効になることです。

そこで私は試してみましたが、iPhoneは電話番号をCSSでフォーマットできるリンクの特殊なタイプとして扱うことがわかりました。私はそのアドレスをaddressタグでラップし（他のHTMLタグでも動作するでしょう。単に<a>タグを避けてみてください）、それをCSSでスタイルしました。

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

デスクトップブラウザではプレーンテキストが表示され、Safariモバイルではタブ上にポップアップ表示され、デフォルトの青い色と下線が表示されていないリンクとして表示されました。

パディング/マージンを使用する場合は特に、数値に適用されるCSSルールに注意してください。

2
Bryana

<meta name="format-detection" content="telephone=no"> 。このメタタグは、iOSデバイス上のデフォルトのSafariブラウザで機能し、電話リンクに囲まれていない電話番号に対してのみ機能します。

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

メタタグを指定した場合、最初の行はリンクとしてフォーマットされませんが、2行目は電話アンカーで囲まれているためです。

あなたはメタタグを全部まとめて手放すことができ、以下のようなミックスインを使うことができます。

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

あなたの電話番号の意図したスタイルを維持するために、あなたはあなたが電話のアンカーでそれらを包むことを確認しなければなりません。

余分な用心深さを保ち、ラッピングアンカータグで適切にフォーマットされていない電話番号のイベントから保護したい場合は、DOMをドリルスルーしてこのスクリプトで調整できます。必要に応じて交換パターンを調整します。

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

またはjQueryなしでさらに良い

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');
1
davidcondrey

iOSでは、電話番号はデフォルトでクリック可能になっています（明らかな理由による）。もちろん、電話番号がリンクになっていない場合は、スタイルを無効にするタグが追加されます。

修正するには、これをスタイルシートに追加してみてください。a[href^=tel] { color: inherit; text-decoration: none; }

それはあなたが余分なマークアップを追加することなしにあなたが期待するようにあなたの電話番号をスタイルしておくべきです。

1
subindas pm

あなたがあなたのページに電話番号を持っているつもりがないなら、<meta name="format-detection" content="telephone=no">はちょうどうまくいくでしょう。しかし、修辞学的に言えば、電話番号と電話番号以外の番号を組み合わせて使用​​するつもりならどうでしょうか。

HTMLに数字をハードコーディングするだけであれば、「数字の途中にものを挿入する」ハックがうまくいくでしょう。しかし、クエリから数値データを出力するためにPHPを使用するなど、動的ページにはほとんど使用されません。

例として、私は都市人口のリストを作成していました。一部の人口は、Mobile Safariがそれらを電話番号のリンクに変換するのに十分な大きさでした。幸いなことに、私がしなければならなかったのは、配列出力の周りにPHP number_format()を使用して「千」のカンマを挿入することだけでした。

<?php echo number_format($row["population"]) ?>

このフォーマットは、Mobile Safariに、この番号にはもう少し具体的な目的があると納得させるのに十分なものでした。そのため、私の大きい番号を電話リンクにデフォルト設定することはなくなりました。 @davidcondreyが<a href="tel:18001234567">1-800-123-4567</a>を使用して番号に目的を指定することを提案した場合も同様です。

つまり、Safari Mobileはどうやらセマンティクスに注意を払っているようです。 HTML 5がセマンティックマークアップを中心に構築されており、検索エンジンがセマンティックマークアップに依存していることを考えると、私はできるだけそれを使用するつもりです。

1
KiloVoltaire

<fieldset>に番号を入力すると、iOSが何らかの理由で番号をリンクに変換できなくなります。場合によっては、これが正しい解決策になる可能性があります。私は包括的なリンクへの変換を無効にすることを主張しません。

1
Oliver P

これは私のためにそれをやった：

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

もっと多くの情報を見つけることができます ここ 。

0
Claudio Pascariello

このx-ms-format-detection = "none"属性は、電話のフォーマットを処理します。

https://msdn.Microsoft.com/ja-jp/library/dn337007（v = vs85）.aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>
0
Tabares

ダッシュの間にダッシュのASCII文字を入れて試してみてください。

これから： -

これに：&ndash;

例：change 555-555-5555 => 555&ndash;555&ndash;5555

0
Justin Jb Bryant

Joomlaでは、Yoothemeは私のために働きます：

a:not([class]) {
    color: #fff !important;
}
0
Max