モバイルデバイス用のWebページを作成する必要があります。まだ理解していないことが1つだけあります。テキストをクリックして電話をかけるにはどうすればよいですか。
mailto:
メールのタグのように入力できる特別なURLはありますか?
デバイス固有のソリューションは好ましくありません。
iPhoneが電話番号を自動的に認識してリンクを作成することはわかっていますが、これを画像やほとんどのモバイルデバイスにも適用できればすばらしいと思います。
モバイルデバイス用のWebページを作成する必要があります。まだ理解していないことが1つだけあります。テキストをクリックして電話をかけるにはどうすればよいですか。
mailto:
メールのタグのように入力できる特別なURLはありますか?
デバイス固有のソリューションは好ましくありません。
iPhoneが電話番号を自動的に認識してリンクを作成することはわかっていますが、これを画像やほとんどのモバイルデバイスにも適用できればすばらしいと思います。
回答:
最近のほとんどのデバイスはtel:スキームをサポートしています。だから使用して<a href="tel:555-555-5555">555-555-5555</a>
、あなたは行くのが良いはずです。
画像に使用したい場合は、<a>
タグを使用して、<img/>
配置された他の通常の状況と同じように配置できます。<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>
完全を期すために、ここに回答を追加します。
<a href="tel:1234567">Call 123-4567</a>
ほとんどのデバイスで問題なく動作します。ただし、デスクトップでは、これはクリックしても機能しないリンクとして表示されるため、モバイルデバイスでのみ条件付きで表示されるようにCSSを使用することを検討する必要があります。
また、Skype(かなり一般的)はデフォルトで異なる構文を使用することを知っておく必要があります(ただし、tel:を使用するようにパラメーター化できます)。
<a href="callto:1234567">Call 123-4567</a>
ただし、最新のモバイルブラウザー(Androidでは確実にわかっていtel
ます)では、構文は呼び出しアクションを完了するために使用できる利用可能なアプリケーションのポップアップを提供するはずです。
クリック可能なスマートフォンリンクコード:
次のリンクを使用して、クリック可能な電話リンクを作成できます。以下のコードをコピーしてWebページに貼り付け、電話番号で編集できます。このコードはすべての電話で機能するわけではありませんが、iPhone、Droid / Android、およびBlackberryで機能します。
<a href="tel:1-847-555-5555">1-847-555-5555</a>
電話番号リンクは、上記のようにダッシュを付けて、または付けずに使用できます。また、次の例でも使用できます。
<a href="tel:18475555555">1-847-555-5555</a>
この例のように、電話番号が「tel:18475555555」で設定されている限り、リンク内の任意のテキストを使用することもできます。
<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>
以下は、チェックアウトできるクリック可能な電話のハイパーリンクです。電話以外のほとんどのブラウザでは、このリンクから「ウェブページを表示できません」というエラーが表示されるか、何も起こりません。
注: iPhone Safariブラウザーはページ上の電話番号を自動的に検出し、このページのコードを使用せずにテキストを通話リンクに変換します。
WTAIスマートフォンリンクコード:WTAIまたは「ワイヤレステレフォニーアプリケーションインターフェース」リンクコードを以下に示します。このコードは正しい携帯電話プロトコルと見なされ、Droidなどのスマートフォンで機能しますが、iPhoneのApple Safariでは機能しない可能性があるため、上記のコードをお勧めします。
<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a>
基本的に、が前に付いた電話番号を指すattrを持つ<a>
要素を使用href
しtel:
ます。プラスは国コードを指定するために使用でき、ハイフンは人間の目のためだけに含めることができることに注意してください。
MDN Webドキュメント
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link
HTMLの
<a>
要素(またはアンカー要素)は、そのHREF属性と一緒に、他のウェブページ、ファイル、同じページ内の位置、電子メールアドレス、または任意の他のURLへのハイパーリンクを作成します。[…]
電話リンクを提供することは、電話に接続されたWebドキュメントおよびラップトップを表示するユーザーに役立ちます。
<a href="tel:+491570156">+49 157 0156</a>
IETFドキュメント
https://tools.ietf.org/html/rfc3966
tel
電話番号のURI「tel」URIの構文は次のとおりです。
telephone-uri
="tel:"
電話加入者[…]
例
tel:+1-201-555-0123
:このURIは、米国の電話番号を指します。ハイフンは、数値をより読みやすくするために含まれています。国、市外局番、加入者番号が分かれています。
tel:7042;phone-context=example.com
:URIは、「example.com」のコンテキスト内で有効な市内電話番号を示します。
tel:863-1234;phone-context=+1-914-555
:URIは、特定の電話プレフィックス内で有効な市内電話番号を示します。
HTMLアンカータグ<a>
を使用し、属性href
をで開始するだけですtel:
。国番号から電話番号を始めることをお勧めします。次の例に注意してください。
<a href="tel:+989123456789">NO Different What it is</a>
この例では、国コードは+98
です。
ヒント:携帯電話に非常に適しています。macOSでのtel:
プレフィックスコールは知っていますFaceTime
が、Windowsではわかりませんが、Skypeを起動する原因となったと思います。
詳細情報:ブラウザでサポートされているURLスキームのリストにアクセスして、すべてのhref
値のプレフィックスを確認できます。