レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。
あ、当然jQueryの本体は読み込んでいるものとして書きますので、あしからず。
1 2 3 4 5 6 7 8 9 |
$(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.tel-link').each(function(){ var str = $(this).text(); $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>')); }); } }); |
で、こんな感じでソースを書きますね。
1 2 3 |
<p> お問い合わせ:<span class="tel-link">00-0000-0000</span> </p> |
あとはお好みでcssを書いちゃってください。以上。
コメント