Safariの電話番号自動リンク化機能を無効にする方法
<meta name="format-detection" content="telephone=no">
を
<head> .........中略.......... <meta name="format-detection" content="telephone=no"> .........中略.......... </head>
こんな感じで、headの間に記述するだけでOK。
「Ajax他」カテゴリーアーカイブ
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
スマホページで画像バナーをタップで、電話発信させる方法
リンクや画像をタップするだけで電話をかけることができる機能がある。
SafariやSkypeをインストールしている場合、普通の電話番号をリンクにする機能がある。
この機能には色々と問題点があるので、それをクリアしていこう。
従来の方法の問題点
<a href="tel:xxxxxx"></a>
01-0000-0000
と、リンクにしておくと、タップ（クリックすると）
こんな感じのダイアログが出てきて通話ができる機能だ。
しかし、このリンクをPCでクリックしてしまうと、
こんな感じのエラーが出てきて嫌な感じになる。
これを解決する方法はいくつがあるが、iPhoneだけでなくAndroidにも対応する方法を紹介する。
<span>を使って、PCの時にリンクにならないようにする方法
まず、HTMLファイルの電話のリンクにしたい部分を
<span class="tel-link">01-0000-0000</span>
と記述する。
これは、span なので、当然リンクにならない。PCでクリックしても何も起こらない。
スマホの時にこれをリンクに書き換える必要があるので、
jsファイルに
$(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>'));
});
}
});と書いておく。
分からなければ、ここから右クリックして「リンク先を保存(言葉違う可能性あり)」tel-link.jsをダウンロードしよう。
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
HTMLファイルにjsファイルを読み込ませる記述
<head> .......中略...... <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/tel-link.js"></script> </head>
という感じで、
<span class="tel-link">01-0000-0000</span>
と記述したHTMLファイルのheadの間に記述。
jsファイルをアップロードして搭載
jquery-1.11.3.min.js
tel-link.js
HTMLファイル
上記3つをサーバーにアップロードする。
完了。
画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法
スマホページで画像バナーをタップで、電話発信させる方法
下記の従来の方法は絶対NG
<a href="tel:xxxxxx"></a>
<[code]a href="tel:01-0000-0000">01-0000-0000"></a>[/code]
と、リンクにしておくと、タップ（クリックすると）
こんな感じのダイアログが出てきて通話ができる機能だ。
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
でも紹介した通り、spanをリンクにしてスマホで電話発信する事ができる。
これでPCでクリックしてしまっても、
アドレスのプロトコルが不明です
telというプロトコルはどのアプリケーションにも関連づけられておらず、
Firefox でこのアドレスを開く方法が分かりません。
・このプロトコルを使用するアドレスを開くには、別のソフトウェアをインストールする必要があるかもしれません。
というような、エラーメッセージが出てくることはない。
ただし、iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法では、文字リンクにする必要があった。
これを画像リンクやバナー、ボタンで行う方法。もちろんiPhoneだけでなくAndroidにも対応する方法を紹介する。
<span>を使い、PCでリンクにさせない
まず、HTMLの電話のリンクにしたい部分に
<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>
と書く。
alt から電話番号を取得するので、必ず記入する事！
jsファイルに
$(function(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
$('.tel-link img').each(function(){
var alt = $(this).attr('alt');
$(this).wrap($('<a>').attr('href', 'tel:' + alt.replace(/-/g, '')));
});
}
});と書いておく。
分からなければ、ここから右クリックして保存などで、tel.jsをダウンロードしよう。
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
拡張子やファイル名がちゃんとなっているか注意！
HTMLファイルにjsファイルを読み込ませる記述
<head> .......中略...... <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/tel.js"></script> </head>
という感じで、
<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>
と記述したHTMLファイルのheadの間に記述。
jsファイルをアップロードして搭載
jquery-1.11.3.min.js
tel.js
HTMLファイル
上記3つをサーバーにアップロードする。
完了。