携帯電話で Web ページのリンクをクリックしたときに電話をかける方法
-
05-07-2019 - |
質問
モバイルデバイス用の Web ページを構築する必要があります。まだ理解できていないことが 1 つだけあります。テキストをクリックして電話をかけるにはどうすればよいですか?
次のような特別な URL を入力できますか? mailto:
メールのタグ?
デバイス固有のソリューションは好ましくありません。
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>
他のヒント
適切なURLスキームはtel:[number]なので、次のようにします
<a href="tel:5551234567"><img src="callme.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>
以下はクリック可能な電話のハイパーリンクで、確認できます。電話機以外のほとんどのブラウザでは、このリンクから「Web ページを表示できません」というエラーが表示されるか、何も起こりません。
注記: iPhone Safari ブラウザは、ページ上の電話番号を自動的に検出し、このページのコードを使用せずにテキストを通話リンクに変換します。
Wtaiスマートフォンリンクコード:wtai または「ワイヤレス テレフォニー アプリケーション インターフェイス」リンク コードを以下に示します。このコードは正しい携帯電話プロトコルであると考えられており、Droid などのスマートフォンで動作しますが、iPhone の Apple Safari では動作しない可能性があるため、上記のコードをお勧めします。
<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a>
本質的には、<a>
で始まる電話番号を指すhref
属性を持つtel:
要素を使用します。プラス記号を使用して国コードを指定でき、ハイフンを人間の目のためだけに含めることができます。
MDN Webドキュメント
https://developer.mozilla.org / en-US / docs / Web / HTML / Element / a#Creating_a_phone_link
HTML
<a href="tel:+491570156">+49 157 0156</a>
要素(またはアンカー要素)は、href属性とともに、他のWebページ、ファイル、同じページ内の場所、電子メールアドレス、またはその他へのハイパーリンクを作成しますURL。[<!>#8230;]
電話リンクの提供は、電話に接続されたWebドキュメントやラップトップを表示するユーザーに役立ちます。
tel
IETFドキュメント
https://tools.ietf.org/html/rfc3966
telephone-uri
電話番号のURI<!> quot; tel <!> quot; URIの構文は次のとおりです。
"tel:"
=tel:+1-201-555-0123
電話加入者[<!>#8230;]
例
tel:7042;phone-context=example.com
:このURIは、米国の電話番号を指します 州。数字をより人間的なものにするためにハイフンが含まれています 読み取り可能;国、市外局番、加入者番号を分けています。
tel:863-1234;phone-context=+1-914-555
:URIはローカル電話を説明します コンテキスト内で有効な番号<!> quot; example.com <!> quot;。<=>:URIはローカルを記述します 特定の電話プレフィックス内で有効な電話番号。