Как использовать «tel» на мобильных устройствах?

Question

[Mary Солнечная]

Привет. Использую "tel" чтобы ссылочка была кликабельной и переходила сразу в телефонную книгу.

<a href="tel:[phone]" class="btn">[phone]</a></span>

Подскажите пожалуйста: как сделать так, чтобы ссылка с выводом в телефонную книгу была доступна ИСКЛЮЧИТЕЛЬНО на мобильных устройствах, т.к. если пользователь в десктопе начнет кликать и у него сразу откроется диалоговое окно с просьбой перейти на внешнее приложение (а нам это как бы не надо:). Заранее спасибо!

Answer 1

[Антон Шаманов]

самое простое простое решение - добавить скрипт (использует jquery):

if (screen.width > 768) $('a[href^="tel:"]').removeAttr('href');

Comments

[Андрей Hecc]

В таком случае лучше использовать .removeAttr('href'), так как конструкция .attr('href', '#') будет кидать человека к верху страницы при клике на блок.

[Антон Шаманов]

Андрей Hecc: согласен, поправил

Answer 2

[Александр]

Никак, только лишь скриптом выявлять мобильные браузеры и добавлять ссылку только для них.
detectmobilebrowsers.com
https://github.com/kaimallea/isMobile

Answer 3

[devstudent]

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

Answer 4

[Mopkoff-ka]

Можете еще попробовать ширину экрана отлавливать, но это так себе способ.
Сделать 2 одинаковые ссылки и показывать без href="tel:" до ~700-800px и с ним на экранах меньше 700-800.