html - エンド ユーザーがリンクを処理できるかどうかを確認する方法はありますか?
5 に答える
DeviceAtlasとWurflはこの情報の一部を取得できますが、多くの人が指摘しているように、デバイスの通話機能を検出する本当に信頼できる方法はありません。結局のところ、誰かがデスクトップを使用していても、インストールしたソフトウェア (または OS の機能) に基づいて、そこから電話をかけることができる場合があります。
最高のエクスペリエンスを提供するために、リンクを含める必要がありtel:
ます。これにより、誰もが番号を処理できる場合にダイヤルする機会が与えられます。CSS を使用して、リンクのように見えないようにして、tel:
サポートされていないブラウザー/OS の潜在的な混乱を減らすことができます。番号に電話をかけたいユーザーは、その番号を選択するか、とにかくそれに触れて (番号をコピーすることを期待して)、リンクをアクティブにするか (タッチ シナリオの場合)、または手を見て (マウス シナリオの場合)、目的をより迅速に達成するのに役立ちます。 .
余談ですが、リンクを設定white-space: nowrap
するtel:
ことも常に良い考えです :-) これにより、数字が 1 行に収まるため、ハイフンで区切ることができなくなります。
a[href^=tel:] { white-space: nowrap; }
私が知る限り、これを行うための信頼できる良い方法はないようです。ブラウザ以外にインストールされているソフトウェアに依存するため、Webページに公開されるとは思わない(そうでない場合は、特にitunesやvisualなどのアプリケーション固有のリンクを使用して、ユーザーが特定のソフトウェアをインストールしているかどうかを確認するために使用できます)スタジオ)。
編集:コメントで指摘されているように、Firefoxはナビゲートしようとし、代わりにエラーページを表示して、以下の解決策がFirefoxでは機能しないことを示します。
これに代わる方法は、誰かがそれをクリックして適切に機能しないことを単純に処理することです。クロムでテストすると、プロトコルが認識されない場合、ブラウザーは単に何もしないように見えるので、後に部分を取得して実際の数値にtel:
変換する onclick を追加するだけです。click to call
それをクリックすると、何もインストールされていない場合に数字が表示されますが、これはおそらくまともな妥協点ですか?
私の知る限り、ユーザーが持っている機能/アプリケーションを検出することは、セキュリティ上の理由から難しい場合がありますが、いくつかのことを除外してそこから抜け出すことができます.
リンクを処理できるモバイル ブラウザを確認してみてください。そうでない場合は、他のデバイスが Skype などの電話番号を使用できるかどうかを確認し、そうでない場合は通常の番号を表示します。
これは、これらの質問からの回答を組み合わせて、href tel と標準ブラウザとJavascript を組み合わせて Skype を検出しますか?
<div>
<?php if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android')) { echo '<div id="tel"><a href="tel:123456">123456</a></div>'; }else{?>
<script>
function skype (failureFunction) {
var $ = jQuery;
if ($.browser.safari || $.browser.opera) {
return true;
} else if ($.browser.msie) {
try {
if (new ActiveXObject("Skype.Detection")) return true;
} catch(e) { }
} else {
if (typeof(navigator.mimeTypes["application/x-skype"]) == "object") {
return true;
}
}
$('a[href^="skype:"]').click(function() {
failureFunction();
return false;
});
return false;
}
jQuery(function($) {
if (skype()) {
$('div#tel').html("<a href='skype:123456'>123456</a>");
} else {
$('div#tel').html("<p>123456</p>");
};
});
</script>
<div id="tel"></div>
<?}?>
それがあなたにとって正しい方向への一歩であることを願っています