スマホ閲覧のみ電話番号タップ

htmlにaタグで電話番号をタップする方法だとPCもタップされます。

JavaScriptを使ってPCはタップされない様に設定出来ます。

htmlは普通に記載します。aタグなしの状態です。classをデザイン用cssとsj用につけた方が

同じクラスにJavaScriptが効いてしまうのでご注意です。

jsコード

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
$(function() {
$(‘.tellink’).each(function() {
var str = $(this).html();
$(this).html($(‘<a>’).attr(‘href’, ‘tel:’ + $(this).text().replace(/-/g, ”)).append(str + ‘</a>’));
});
});
}

デバイスで判断しているやり方です。確認はchromeのデベロッパーツールで見れます。

スマホでサイトを検索して電話番号をタップする機会は以前に比べると当たり前になってきたように思えます。

また、タップではなくてスマホ画面下部にスクロールしてもずーっとついてくるメニューや電話番号があるサイトも多くなってきました。スクリプトを組み込みするタイプです。

広告が出るタイプもありますが、表示されるとすぐ閉じてる気がします。。

ユーザの訴求対応を考えるのはなかなか難しいです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする