コードを2回入れてもらえますか？すなわち..
<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>
次に、「display：none;」ブラウザのサイズに応じて、関連するクラスで？
私はこの問題に対処し、解決策を探していましたが、このスレッド（および他のいくつかのスレッド）を見つけました。私はそれらのどれも正しく動作させることができなかったことを告白しなければなりません。私は何か間違ったことをしていると確信していますが、チートを見つけました。
他の人が指摘しているように、CSSを変更して、表示されているリンク表示（、、）colorを非表示にすることは、最初の最も簡単なステップです。チートは、リンクのを定義することです。text-decorationcursortitletel
<p>Just call us at <a class="cssclassname" href="tel:18005555555"
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>
これを行うことにより、リンクの表示インジケーターが偽装されるだけでなく（CSSを介して-他の例を参照）、誰かがリンクにカーソルを合わせると、タイトルがポップアップ表示され、「CLICK TODIAL-MobileOnly」と表示されます。そうすれば、ユーザーエクスペリエンスが向上するだけでなく、クライアントがリンク切れを非難することもありません。
私にとって、新しいクラス/セットアップのない最も簡単でありながら最も単純な方法は、cssを使用することです。
a{
color: #3399ff;
}
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) {
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: underline;
color: #3399ff;
pointer-events: auto;
cursor: pointer;
}
}
HTMLは次のようになります。
<a href="tel:+123-456-7">(+12)3 456 7</a>
これは、最新のブラウザとIE11以降で機能します。8 <IE <11を含める必要がある場合は、ポインターイベントがIEで機能しないため、JavaScriptに以下を追加します。
var msie = window.navigator.userAgent.indexOf("MSIE ");
if (msie > 0){
var Elems = [], Tags = document.querySelectorAll("a[href^='tel']");
//Nodelist to array, so we're able to manipulate the elements
for (var i = 0; i < Tags.length; i++ ) {
Elems[ i ] = Tags[ i ];
}
for(var i = 0; i < Elems.length; i++){
Elems[ i ].removeAttribute('href');
}
}
編集：私はあなたのために役立つかもしれない別のスレッドで別の答えを見つけました-そう-答え
私は最近これと同じ問題を抱えていました。この問題は、stackoverflowやその他のあらゆる場所で発生します。'tel：'プレフィックスを非表示にして、通常のブラウザで爆発しないようにするにはどうすればよいですか。良い単一の答えはありません。
私はそれをこのようにすることになりました：
まず、メタ言語を使用して、useragent文字列に基づいてブラウザーとモバイル（php / coldfusion / perlなど）をフィルター処理します。
regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT
これにより、デスクトップブラウザと電話のif/else条件がわかります。
次に、私のhrefタグは次のようになります。<a class="tel" id='tel:8005551212' href=''>800-555-1212</a>
CSSを使用して、デスクトップスタイルシートの.telクラスのスタイルを設定し、デスクトップブラウザへのリンクのように見えないようにします。電話番号をクリックすることはできますが、それは明らかではなく、何もしません。
/* this is in default stylesheet, styles.css: */
.tel{
text-decoration:none;
color: #000;
cursor:default;
}
/* it should be re-styled in mobile css: */
.tel{
text-decoration: underline;
color: #0000CC;
cursor:auto;
}
最後に、モバイルリンクで少しjqueryを実行します。jQueryはa.telクラスからIDを取得し、それをhrefプロパティに挿入します。これにより、電話ユーザーはIDをクリックできるようになります。
全体は次のようになります。
<!-- get regular CSS -->
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="Screen" />
<!-- get user agent in meta language. and do if/else on result.
i'm not going to write that part here, other than pseudocode: -->
if( device is mobile ) {
<!-- load mobile CSS -->
<link rel="stylesheet" href="styles/mobile.css" type="text/css" media="handheld" />
<!-- run jQuery manipulation -->
<script>
$(function(){$('a.tel').prop('href',$('a.tel').prop('id'));});
</script>
}
<p> Call us today at <a class="tel" id='tel:8005551212' href=''>800-555-1212</a>!</p>
このアプローチの1つの注意点：IDは一意である必要があります。リンクするページに重複する電話番号がある場合は、IDを名前に変更してから、jQueryを使用してそれらをループします。
cssメディアクエリを使用して、リンクとして表示されるタイミングと表示されないタイミングを制御できます。
@media(min-width:768px){
a[href^="tel:"] {
pointer-events: none;
}
}
768px未満のものはすべてリンクとして機能し、それより上ではテキストと同じように機能します。
モバイル画面のクリックを無効にしたいだけの場合：
if(typeof window.orientation !== 'undefined'){
$('a[href^="tel:"]').on('click', function(e){
e.preventDefaults();
});
}
お役に立てれば ：）
私はModernizr、特にtouchテストを使用してこれで成功しました。タブレットやタッチ対応のラップトップには何の役にも立たないという点で完璧なソリューションではありませんが、ほとんどのデスクトップブラウジングの状況で機能します。
HTML：
Call us at: <a href="tel:1-800-BOLOGNA" class="call-us">1-800-BOLOGNA</a>
CSS：
.no-touch a.call-us {
color: black; /* use default text color */
pointer-events: none; /* prevents click event */
cursor: text; /* use text highlight cursor*/
}
上記のCSSはclass="call-us"、デスクトップの大部分をカバーする非タッチデバイス上のリンクを対象としています。
これpointer-eventsは最新のすべてのブラウザでサポートされていますが、IEはバージョン11以降でのみサポートされていることに注意してください。互換性チャートを参照してください。
まだ不完全な別の解決策は、画面幅とタッチ機能を検出し、jQueryを使用して電話リンクを挿入するためModernizr.mqにと一緒に使用することです。Modernizr.touchこのソリューションは、電話のリンクをソースコードから除外し、特定の幅よりも小さいタッチデバイスにのみ表示されます（たとえば、720pxはほとんどの電話をカバーしますが、ほとんどのタブレットは除外します）。
最終的に、ここで防弾ソリューションを考え出すのはブラウザベンダー次第です。
私は最良の方法を見つけました。これは古いと思いますが、これを行う非常に簡単な方法を見つけました。
以下のこのコードを使用する
<a href=“tel:888-555-5555” class="not-active">888-555-5555</a>
//This is the logic you will add to the media query
.not-active {
pointer-events: none;
cursor: default;
}
CSSでメディアクエリを利用します。したがって、すべてのデスクトップに対してメディアクエリを作成します
@media only screen and (min-width: 64em) {
/* add the code */
.not-active {
pointer-events: none;
cursor: default;
}
}
これで、すべてのデスクトップサイズのページがクリックできなくなります。
これは、ほとんどのブラウザの単純なメディアクエリで実行できるようです。このようなものは私にとって魅力のように機能しています：
<style type="text/css">
#mobil-tel {
display:none;
}
@media (max-width: 700px) {
#mobil-tel {
display:block;
}
#desktop-tel{
display:none;
}
}
</style>
デスクトップリンクでは「href」を省略し、モバイルリンクでは「href」を入力します。
私が2セントの価値を（かなり長いことが判明している）議論に加えると思っただけです。
私は基本的に（リンク上の）onClickイベントを使用してJavascriptを実行し、ブール値のtrueまたはfalseを返します。戻り値がtrueの場合、つまり、デバイスが電話であるかどうかをテストする変数または関数が値trueを返す場合、hrefURLの後にブラウザが続きます。戻り値がfalseの場合、hrefURLは事実上非アクティブになります。（標準のHTML動作、HTML5よりずっと前。）
これが私が意味することです：-
<html>
<head>
<title>tel markup example</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <!-- Does not really matter what version of jQuery you use -->
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
if ( !probablyPhone ) {
alert ("Your device is probably not a phone");
( function( $ ) {
$( '.call' ).css ( "text-decoration", "none" );
$( '.call' ).css ( "color", "black" );
$( '.call' ).css ( "cursor", "default" );
} )( jQuery );
}
}
</script>
</head>
<body onLoad="initialize();">
Please ring (some fictitious number in Australia): <a href="tel://+61391112222" class="call" onClick="return probablyPhone;">+61 3 9111 2222</a>
</body>
</html>また、リンクの再フォーマットを追加して、通常のテキストのようにユーザーに表示されるようにしたことに注意してください。
この投稿/回答を終了するために、電話を検出するための簡潔なJavaSciptコード（ユーザーエージェントとontouchstartイベントに基づく）を書いたクレジットは、このstackoverflow投稿の仲間のMelbournianrgbに送られます
これは、この問題を解決するために私が開発した単純なjqueryベースのソリューションです。説明については、コードコメントを参照してください。 https://jsfiddle.net/az96o8Ly/
// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on('click', '[href^="tel:"]', function(e){
try{
// These user-agents probably support making calls natively.
if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Do nothing; This device probably supports making phone calls natively...
} else {
// Extract the phone number.
var phoneNumber = jQuery(this).attr('href').replace('tel:', '').trim();
// Tell the user to call it.
alert("Please call "+phoneNumber);
// Prevent the browser popup about unknown protocol tel:
e.preventDefault();
e.stopPropagation();
}
} catch(e){
console.log("Exception when catching telephone call click!", e);
}
});
私のアプローチは、上記の別のアプローチに似ています。私が考慮に入れるいくつかの考慮事項があります：
tel:リンクを処理できるデスクトップブラウザが登場しました。デスクトップでのChromeの動作は、最悪の場合、クリックしても何もしません。せいぜい、GoogleVoiceで電話をかけることができます。tel:リンクの作成を担当する場合は、すべてのtel:リンクを担当し、ブラウザでの自動検出を無効にする必要があります。このすべてを念頭に置いて、最初にmetaタグを追加することをお勧めします<head>：
<meta name="format-detection" content="telephone=no"/>
次に、ユーザーエージェントを解析し、リンクがクリックされたときにブラウザがエラーページを表示しないtrueと思われる場合にのみ返すJavaScript関数を定義します。
function hasTelSupport()
{
return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}
onclick次に、リンクの属性からその関数を呼び出します。
<a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>
これによりtel:、Chrome、Edge、iOS Safari、Androidブラウザー、Blackberry、Dorothy、Firefox Mobile、IE Mobile、Opera Mini、Opera Mobile、およびwebOSでリンクをクリックできるようになります。他のデバイスやブラウザをクリックしても、リンクは何もしません。
tel:リンクには国際フォーマットを使用してください。つまり、最初の文字はa+と国コードである必要があります。
TattyFromMelbourneの投稿のおかげで、私は今、非常に単純なビットを使用しています。
私のボタンid="call"は、彼の「おそらく電話」テスト機能に基づいて電話をかけますが、どちらの方法でも連絡先情報セクションまでスクロールダウンして、ボタンが何があっても機能するようにします。
ポップアップを削除するために、アラートを空の関数に置き換えました。
<a id="call" href="#contact">PHONE US</a>
$("#call").on('click', function() {
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
var link = "callto:15555555555";
if ( !probablyPhone ) {
window.alert = function() {};}
else{window.location.href = link;}
});
</script>
css3メディアクエリを使用してモバイルウィンドウを検出し、それに応じてリンクを非表示にすることができます。
@media(max-width:640px){
.your-calling-link{
display:none;
}
}
または、リンクを表示してクリック機能を無効にする場合は、jquery関数を使用します。
screen.width
また
screen.innerWidth
を使用してリンクのクリック機能を無効にします
$('.your-link').off(click);
これを処理する1つの方法は、2つの別々のdivを作成し、display：hiddenを使用することです。
例：
<div class="mobile-desktop"><p>123-456-7890</p></div>
<div class="mobile-mobile"><a href="tel:123-456-7890">123-456-7890</a></div>
cssで、モバイルブレークポイントを設定します。この部分は本当にあなた次第です。まあ言ってみれば
@media only screen (min-width: 768px){
.mobile-mobile {
display:none;
}
}
@media only screen (max-width: 767px){
.mobile-desktop{
display:none;
}
}
これにより、画面サイズに基づいて1つのdivを非表示にできます。Granted 789は私が選んだ数字なので、モバイルと思われるサイズを選んでください。あなたは私がグーグルで見つけたこのサイトのように、またはそれのような他の人でそれらをオンラインで見つけることができます。最後に、これは簡単なcssマークアップです。いじくり回す必要があるかもしれませんが、アイデアはそこにあります。
この方法は、CSSを追加しなくても機能します。
aタグをタグのようなものに置き換えてみてくださいspan。ただし、もちろんモバイルブラウザの場合のみです。利点は、aCSSでこれをクローキングせず、リンクとして保持したままデフォルトのアクションを妨げないことです。もうなくなるaので、心配する必要はありません。
ここに例を作成しました。そこにある太字の電話はこのように機能します。以下のコードを参照してください。
回答者の1人からコードを取り出して、ブラウザがモバイルかどうかを定義しました。そして、これらのリンクをマークするか、に「tel：」が含まれているclass="tel"かどうかを判断する方法を見つける必要があります。hrefJQueryも必要です。
// define if browser is mobile, usually I use Anthony's Hand mobile detection library, but here is simple detection for clarity
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
if ( !probablyPhone ) {
// find all the A with "tel:" in it, by class name
$('a.tel').each(function(){
var span = document.createElement('span');
// SPAN inherits properties of A, you can also add STYLE or TITLE or whatever
span.innerHTML = this.innerHTML;
span.className = this.className;
// replace A with SPAN
this.parentNode.insertBefore(span, this);
this.parentNode.removeChild(this);
});
}
これをカスタムcssに入力し、1日と呼びます。
a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }
必要に応じて色を変更してください。
乾杯！
モバイルデバイスが検出されたときに、javascriptを介して次のcssを追加しています。
pointer-events:none
jsコードは次のとおりです。
var a = document.getElementById("phone-number");
if (Platform.isMobile()) // my own mobile detection function
a.href = "tel:+1.212.555.1212";
else
$(a).css( "pointer-events", "none" );
私のターゲットサイトでは、すべての電話リンクのマークアップは次のパターンになっています
<a href="tel:111-222-3333"">111-222-3333</a>。私の解決策はとても簡単です：
function setPhoneLink() {
if (screen.width > 640) {
$("a[href^='tel:']").each(function(){
$(this).replaceWith($(this).text());
});
}
}
デバイス幅：モバイル<640; タブレット>=768および<1024; デスク>=1024。出典： http： //javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
そのための要件として画面サイズを使用しないでください。
次のようなCSSメディアクエリを使用できます。
@media (pointer: fine) { /* this is for devices using a mouse, maybe a pen */
a[href^="tel:"] { /* select only "tel:" links */
pointer-events: none; /* avoid clicks on this element */
}
}
@media (pointer: coarse) { /* this works for mobile phones */
}
詳細：https ：//developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
@media screen {.telephone {pointer-events: none;}}