モバイルデバイス用の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>
適切な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
構文によって、呼び出しアクションを完了するために使用できる利用可能なアプリケーションのポップアップが表示されるはずです。
クリック可能なスマートフォンのリンクコード:
次のリンクを使用して、クリック可能な電話リンクを作成できます。以下のコードをコピーしてウェブページに貼り付け、電話番号で編集できます。このコードはすべての電話で機能するとは限りませんが、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 Docs
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link
HTML
<a>
要素(またはアンカー要素)は、そのhref属性とともに、他のWebページ、ファイル、同じページ内の場所、電子メールアドレス、または他のURLへのハイパーリンクを作成します。[…]
電話リンクを提供すると、電話に接続されたWebドキュメントやラップトップを表示するユーザーに役立ちます。
<a href="tel:+491570156">+49 157 0156</a>
IETFドキュメント
https://www.rfc-editor.org/rfc/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
値のプレフィックスを確認できます。
現時点(2021年)でPCまたはタブレットとAndroidで動作するには(IOSでテストされていませんが、動作するはずです)、「a」タグにdata-rel ="external"を追加する必要があります。例:
<a href="tel:+576015000000" data-rel="external">Call Me...</a>