Как сделать <a href> активным только на мобильных устройствах?

Я хочу добавить этот код, чтобы контактные данные на моем веб-сайте автоматически переходили в мобильную панель набора номера или адресную книгу при нажатии:

Как сделать так, чтобы он отображался в виде обычного текста для не телефонных устройств (компьютеров, планшетов, ноутбуков), чтобы он не возвращал ошибку 404 и не мог быть нажат?

Рад использовать любую комбинацию HTML/CSS/JS для достижения этой цели.

Ответы

Ответ 1

Не используйте гиперссылку. Используйте микроданные. Мобильные телефоны распознают, что это телефонный номер, и позволяют нажимать на него, но это не повлияет на обычные веб-браузеры.

<div class="vcard">
    <div class="tel">
        12345555555
    </div>
</div>

Ответ 2

Это может не дать прямого ответа на вопрос, но я бы оспорил ваше предположение о том, что вам нужно скрыть ссылки вызовов на других устройствах.

Почему?

Не телефонные устройства могут по-прежнему совершать звонки. Например, ПК с клиентом VoIP может обрабатывать ссылки tel:.
Планшеты (iPad и Android) обрабатывают ссылки tel:, позволяя пользователю добавлять номер к своим контактам, который, несомненно, будет синхронизирован с их телефоном & ndash; приятное удобство для ваших пользователей.
Полагаться на автоматическое определение формата - это взлом.

Так что просто оставьте это как обычную ссылку. Возможно, сделайте это очевидным, связав номер телефона, чтобы кто-то на рабочем столе без программного обеспечения для телефонии понял, что ничего не произойдет, когда он щелкнет по нему.

Call Us Now at <a href="tel:12345555555">(234) 555-5555</a>

Также помните, что ссылка tel: не приведет к ошибке 404, поскольку HTTP-запрос никогда не генерируется. На моей машине без обработчика tel: Chrome просто ничего не делает, IE9 говорит: "Некоторый контент или файлы на этой веб-странице требуют программы, которую вы не установили". (разумно), и Firefox говорит: "Firefox не знает, как открыть этот адрес, потому что протокол (тел) не связан ни с одной программой". (также разумно).

Когда я столкнулся с этой проблемой, я решил, что польза от простого перехода к ссылкам tel: перевесит любые недостатки или грязные альтернативы.

Ответ 3

Я использую приведенный ниже CSS с медиазапросами, чтобы достичь этого.

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        cursor:default;
    }
}

Это основано на этом вопросе

Ответ 4

У меня возникла та же проблема, и я начал использовать метатег для определения формата:

<meta name="format-detection" content="telephone=no" />

за это обсуждение с той же проблемой: Отключить обнаружение телефонных номеров на веб-ссылках iPad на рабочем столе?