web-dev-qa-db-ja.com

携帯電話のWebページでリンクをクリックしたときに電話をかける方法

モバイルデバイス用のWebページを作成する必要があります。まだ考えていないことが1つだけあります。テキストをクリックして電話をかけるにはどうすればよいですか。

電子メールのmailto:タグのように入力できる特別なURLはありますか?

装置特有の解決策は好ましくない。

私はiPhoneが自動的に電話番号を認識してこれのためのリンクを作成することを知っています、しかしこれが画像のためにもされることができればそれは素晴らしいでしょう…そしてほとんどのモバイル機器のためにも。

426
Frederic Morin

最近のほとんどのデバイスは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>

766
meme

適切なURLスキームはtel:[number]です。

<a href="tel:5551234567"><img src="callme.jpg" /></a>
53
Jess

完全を期すためにここに答えを追加したいです。

<a href="tel:1234567">Call 123-4567</a>

ほとんどのデバイスで問題なく動作します。ただし、デスクトップではクリックしても何もしないリンクとして表示されるため、CSSを使用してモバイルデバイスでのみ条件付きで表示されるようにすることを検討してください。

また、Skype(かなり普及している)はデフォルトでは異なる構文を使用していることを知っておく必要があります(ただし、tel:を使用するようにパラメータ設定することもできます)。

<a href="callto:1234567">Call 123-4567</a>

しかし、私は最新のモバイルブラウザ(私はAndroid上で確かに知っている)で今tel構文が呼び出し動作を完了するのに使用できる利用可能なアプリケーションのポップアップを提供するべきであると思う。

39
Varun Vohra

クリック可能なスマートフォンのリンクコード:

次のリンクはクリック可能な電話リンクを作るのに使用することができます。下記のコードをコピーしてあなたのウェブページに貼り付け、そしてあなたの電話番号で編集することができます。このコードはすべての電話で機能するわけではありませんが、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または "Wireless Telephony Application Interface"リンクコードは以下の通りです。このコードは正しい携帯電話プロトコルと見なされ、Droidなどのスマートフォンでは機能しますが、iPhone上のApple Safariでは機能しない可能性があるため、上記のコードをお勧めします。

<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a> 
18
Gaurang P

基本的に、<a>で始まる電話番号を指すhref attrを持つtel:要素を使用します。プラス記号は国コードを指定するために使用でき、ハイフンは人間の目のためだけに含めることができることに注意してください。

MDN Web Docs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

HTML <a> element(またはアンカー要素)は、href属性とともに、他のWebページ、ファイル、内部の場所へのハイパーリンクを作成します同じページ、メールアドレス、またはその他の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は、特定の電話プレフィックス内で有効なローカル電話番号を示します。

2
jtheletter