2017年9月 アーカイブリスト

« 2017年5月  

2017 Sep 01

モバイル用のWEBサイト製作で便利なスクリプトを発見したので、自分用のメモです(´・ω・`)ノ

HTMLコードで、リンクをクリック(タップ)すると通話可能の指定を記載する場合は、

<a href="tel:0120123456">直接電話連絡はコチラ</a></span>

こうなりますよね(´・ω・`)

ただ電話機能の無いPCユーザーには、無効なリンク表示が見えてしまってるので、どうしたものかと考えていたのですが...

今回のメモは、スマホユーザーのみTELタグが有効になるという、なかなか素敵なスクリプトです(´・ω・`)b

◎HTML記述

TEL指定した箇所を指定付きので囲む。
「data-tel」に通話したい電話番号を入力します。

<span data-action="call" data-tel="0120123456">直接電話連絡はコチラ</span>


◎javaScript記述 ※要jQuery読込(バージョン1でも動きました)

適当にファイル名をつけて、外部javaScriptへ(´・ω・`)

$(function() { if (!isPhone()) return;

$('span[data-action=call]').each(function() {
var $ele = $(this);
$ele.wrap('');
});
});

function isPhone() {
return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}

表記も設置も簡単ですね(´・ω・`)すごく助かります!

◎参考サイト様
レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
http://qiita.com/emegane/items/bacdb2eaf9e1e7104720

Site Search

Tag Cloud


2002.6.6 count start