ホームページ >ウェブフロントエンド >CSSチュートリアル >iPhoneが電話番号を青いハイパーリンクとして自動フォーマットしないようにするにはどうすればよいですか?

iPhoneが電話番号を青いハイパーリンクとして自動フォーマットしないようにするにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-15 04:20:02462ブラウズ

How to Stop iPhone from Auto-Formatting Phone Numbers as Blue Hyperlinks?

iPhone/iOS での電話番号のスタイルの変更

iPhone/iOS デバイスでは、電話番号が青色のハイパーリンクとして自動的に表示されます。この機能はユーザーにとって便利ですが、Web サイトのデザイン美と一致しない可能性があります。この問題は次の解決策で解決されます。

1.メタ タグによる自動フォーマットの削除:

電話番号から青色のハイパーリンクを完全に削除するには、次のメタ タグを に追加します。 HTML ドキュメントのセクション:

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

このメタ タグは、青いハイパーリンクのスタイルを含む、電話番号のすべての自動フォーマットを無効にします。

2.電話番号の CSS スタイル:

メタ タグを設定できない場合は、CSS を使用して電話番号のスタイルを変更できます。 2 つのオプションが使用可能です:

オプション 1 (Web ページに推奨):

CSS 属性セレクターを使用して、「tel」で始まる href 値を持つターゲット リンク:

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  /* Additional styling properties here */
}

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

電話番号をリンク/アンカー タグで囲み、次の 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;
}

追加メモ:

  • クリック可能なリンクとして保存したい電話番号がある場合は、手動でフォーマットしてくださいこれらは、href="tel: 属性を使用したリンクとして使用されます。
  • x-apple-data-detectors 属性は iOS に固有であり、検出可能なコンテンツとして自動検出された要素 (電話を含む) をターゲットにするために使用できます。数字).

以上がiPhoneが電話番号を青いハイパーリンクとして自動フォーマットしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。