web-dev-qa-db-ja.com

クリックしてhtmlを呼び出します

ユーザーがモバイルデバイスからこのリンクをクリックすると、指定された番号に電話をかけるときに、モバイルビュー用のWebサイトでhtml5タグを使用したいと思います。

<p>Book now, call <a href="tel:01234567890">01234 567 890</a></p>

ユーザーモバイルがhtml5以外の場合にこのリンクを非表示にするにはどうすればよいですか。モデナイザーを使用しましたが、リンク属性を検出できないようです。 http://www.tutorialspoint.com/html5/html5_modernizr.htm

なにか提案を？このボタンは、自分のWebサイトがモバイルデバイスで開かれている場合にのみ表示され、モバイルデバイスでは、古いモバイルで開かれたときにこのリンクを非表示にする必要があります。

html5cross-browsermodernizr
43
Umair Rana

tl; dr現代（2018）の時代に何をすべきか？ tel:がサポートされていると仮定し、それを使用し、他のことは忘れてください。

tel: URIスキーム RFC5431 （sms:だけでなくfeed:、maps:、youtube:など）も処理されますプロトコルハンドラ（mailto:およびhttp:がそうであるように）。

それらはHTML5仕様とは無関係です（ 90年代から であり、初めて2kで文書化されました- RFC2806 ）その後、modernizrのようなツールを使用してサポートを確認することはできません。プロトコルハンドラーは、アプリケーションによってインストールできます（たとえばSkypeは、callto:と同じ意味と動作を持つtel:プロトコルハンドラーをインストールしますが、標準ではありません）、ブラウザによってネイティブにサポートされているか、Webサイト自体によって（いくつかの制限付きで）インストールされています。

HTML5が追加したのは、カスタムWebベースのプロトコルハンドラー（ registerProtocolHandler() および関連する関数）のインストールのサポートです。また、isProtocolHandlerRegistered()関数によるサポートのチェックも簡素化します。

ハンドラーがあるかどうかを判断する簡単な方法がいくつかあります： " ブラウザーのプロトコルハンドラーを検出する方法？ ）。

一般的に私が提案するのは：

  1. モバイルデバイスでを実行している場合、tel:がサポートされていると安全に想定できます（はい、veryには当てはまりません） 古いデバイスですが、IMOは無視できます）。
  2. JSがアクティブでない場合、何もしません。
  3. デスクトップブラウザで実行している場合は、リンクされた投稿のいずれかの手法を使用して、サポートされているかどうかを判断できます。
  4. tel:がサポートされていない場合は、callto:を使用するようにリンクを変更し、3で説明されているチェックを繰り返します。
  5. tel:およびcallto:がサポートされていない場合（または、デスクトップブラウザーではサポートを検出できない場合）、そのリンクを削除して、hrefのURLをjavascript:void(0)および（if電話番号はtitleに入れて、テキストスパンでは番号は繰り返されません。ここでは、HTML5 microdataはユーザーには役立ちません（検索エンジンのみ）。 Skypeの新しいバージョンは、callto:とtel:の両方を処理することに注意してください。

（少なくとも最新のWindowsバージョンでは）-（偽）-App Pickerという登録済みプロトコルハンドラーが常に存在することに注意してください不明なファイルを開きます）。これによりテストが消滅する可能性があるため、Windows環境を特別なケースとして扱いたくない場合は、このプロセスを次のように簡略化できます。

  1. モバイルデバイスで実行している場合は、tel:がサポートされていると想定してください。
  2. デスクトップで実行している場合 tel:をcallto:に置き換えます。 次にtel:をドロップするか、そのままにしておきます（Skypeがインストールされている可能性が高いと仮定）。
70
Adriano Repetti