Как добавить номер телефона на сайт, который можно щелкнуть, но скрывает ссылку, когда я просматриваю веб-сайт, который не поддерживает touch.
Я мог бы использовать Modernizr, чтобы настроить его, хотя. Я не знаю, как.
<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>
Я просто занимался этой проблемой, рассматривая решения, и нашел эту тему (и несколько других). Должен признаться, что я не мог заставить кого-нибудь из них нормально работать. Я уверен, что я делал что-то не так, НО я выяснил, что обманывает.
Как указывали другие, изменение CSS для скрытия индикатора видимой ссылки (color, text-decoration, cursor) - это первый и самый простой шаг. Чит должен определить a title для ссылки tel.
<p>Just call us at <a class="cssclassname" href="tel:18005555555"
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>
Таким образом, не только видимый индикатор скрытой ссылки (через CSS - см. примеры из других), но если кто-то наводил курсор на ссылку, заголовок загорается и говорит "CLICK TO DIAL" - только для мобильных устройств ". Таким образом, не только улучшается пользовательский интерфейс, но и ваш клиент не обвиняет вас в наличии неработающей ссылки!
Не могли бы вы получить код дважды? то есть...
<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>
Тогда просто 'display: none;' на соответствующий класс в зависимости от размеров вашего браузера?
Недавно у меня была такая же проблема. Эта проблема встречается во всех stackoverflow и везде. Как вы спрячете префикс "tel:" и не взорваетесь в обычных браузерах. Нет хорошего ответа.
Я закончил так:
сначала я использую метаязык для фильтрации браузера против мобильного (например, php/coldfusion/perl) на основе строки useragent:
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 и вставляет его в свойство href, что делает его доступным для пользователей телефона.
Все выглядит так:
<!-- 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>
Одно предостережение к этому подходу: id должен быть уникальным. Если у вас есть дублирующие телефонные номера на странице, которую вы хотите связать, измените идентификатор на имя, затем вы используете jQuery для их прокрутки.
У меня был успех с использованием 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+. См. Диаграмму совместимости .
Другим решением, еще несовершенным, было бы использовать Modernizr.mq вместе с Modernizr.touch для обнаружения ширины экрана и возможности касания, а затем ввести телефонную связь с помощью jQuery. Это решение держит телефонную ссылку из исходного кода, а затем появляется только на сенсорных устройствах, которые меньше определенной ширины (скажем, 720 пикселей, которые, вероятно, будут охватывать большинство телефонов, но исключают большинство планшетов).
В конечном итоге, разработчикам браузеров придумать пуленепробиваемое решение.
Для меня самый простой, но простой метод без каких-либо новых классов/настроек - через 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>
Это работает для современных браузеров и IE 11+. Если вам нужно включить 8 < IE < 11 добавьте следующее в свой javascript, поскольку указатели-события не работают в IE:
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');
}
}
EDIT: я нашел другой ответ в другом потоке, который может быть вам полезен - SO - Answer
похоже, это можно сделать с помощью простого мультимедийного запроса для большинства браузеров. Что-то вроде этого работает как прелесть для меня:
<style type="text/css">
#mobil-tel {
display:none;
}
@media (max-width: 700px) {
#mobil-tel {
display:block;
}
#desktop-tel{
display:none;
}
}
</style>
и на ссылке рабочего стола, оставьте ссылку "href" на мобильной ссылке, поставьте "href".
Просто подумал, что я добавлю свои двухценты (чтобы это было довольно длинное обсуждение).
В основном я использую событие onClick (по ссылке) для выполнения Javascript для возврата логического значения true или false. Если возвращаемое значение истинно, то есть какая-либо переменная или функция, которая проверяет, является ли устройство телефоном, возвращает значение true, после этого URL-адрес href сопровождается браузером. Если возвращаемое значение ложно, то URL-адрес href становится, по сути, неактивным. (Стандартное поведение 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>если вы просто хотите отключить клик на мобильных экранах:
if(typeof window.orientation !== 'undefined'){
$('a[href^="tel:"]').on('click', function(e){
e.preventDefaults();
});
}
Надеюсь, что это поможет:)
Я нашел лучший способ. Я понимаю, что это старо, но я нашел очень простой способ сделать это.
Используя этот код ниже
<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;
}
}
Теперь все страницы размером с рабочий стол не смогут щелкнуть по нему.
Вот простое решение на основе 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);
}
});
Вы можете использовать медиа-запросы css3 для обнаружения мобильного окна и соответственно скрыть ссылку.
@media(max-width:640px){
.your-calling-link{
display:none;
}
}
В качестве альтернативы, если вы хотите показать ссылку и просто отключить функцию щелчка, используйте функцию jquery:
screen.width
или
screen.innerWidth
и отключите функцию щелчка по ссылке, используя
$('.your-link').off(click);
Этот способ работает без добавления CSS.
Попробуйте заменить тег a на нечто вроде тега span, но только для мобильных браузеров, конечно. Преимущества в том, что вы не скрываете это a с помощью CSS, предотвращающего действие по умолчанию, сохраняя его по-прежнему в качестве ссылки. Это больше не будет a, поэтому вам не придется беспокоиться.
Я создал пример здесь. Жирный телефон работает таким образом, см. Код ниже.
Я взял часть кода от одного из респондентов, чтобы определить, является ли браузер мобильным. И вы должны пометить эти ссылки с помощью class="tel" или найти способ определить, есть ли в нем href "tel:". Также требуется JQuery.
// define if browser is mobile, usually I use Anthony 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);
});
}
Мой подход похож на другой подход выше; есть несколько соображений, которые я принимаю во внимание:
tel:; Поведение Chrome на рабочем столе, в худшем случае, ничего не делать при нажатии. В лучшем случае вы можете позвонить в Google Voice.tel:, она должна нести ответственность за все ссылки tel: и отключить автоопределение в браузере.Учитывая все это, я предлагаю сначала добавить тег meta к вашему <head>:
<meta name="format-detection" content="telephone=no"/>
Затем определите функцию JavaScript, которая анализирует UserAgent и возвращает true тогда и только тогда, когда мы думаем, что браузер не приведет нас на страницу с ошибкой при нажатии ссылки:
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 Browser, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile и webOS. При нажатии на другие устройства или браузеры ссылки ничего не сделают.
Пожалуйста, используйте международный формат для ссылок tel:. Другими словами, первые символы должны быть + и кодом страны.
Введите это в пользовательский css и назовите его днем:
a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }
Измените цвет по мере необходимости.
Ура!
Благодаря сообщению TattyFromMelbourne я теперь использую довольно простой бит:
Моя кнопка id = "звонок" будет делать телефонный звонок на основе его "вероятнофонной" функции тестирования, а также будет прокручиваться вниз до раздела контактной информации в любом случае, давая кнопке рабочее использование независимо от того, что.
Я также заменил предупреждение пустой функцией, чтобы удалить всплывающее окно.
<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>
Я добавляю следующий css через javascript, когда обнаружено мобильное устройство.
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" );
Вы можете использовать запросы css media для управления, когда он рассматривается как ссылка, а когда нет.
@media(min-width:768px){
a[href^="tel:"] {
pointer-events: none;
}
}
все, что ниже 768px, будет работать как ссылка, выше этого, как текст.
@media screen {.telephone {pointer-events: none;}}