Как вызвать телефонный звонок при нажатии на ссылку на веб-странице на мобильном телефоне

Question

Мне нужно создать веб-страницу для мобильных устройств. Есть только одна вещь, которую я до сих пор не понял: как я могу вызвать телефонный звонок с помощью щелчка текста?

Есть ли специальный URL, который я мог бы ввести, как mailto: тег для писем?

Специфичное для устройства решение не является предпочтительным.

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

Answer 1

Большинство современных устройств поддерживают схему tel:. Так что используйте <a href="tel:[phone]">555-555-5555</a> и тебе должно быть хорошо идти.

Если вы хотите использовать его для изображения, <a> тег может обрабатывать <img/> помещается в него, как и в других обычных ситуациях: <a href="tel:[phone]"><img src="path/to/phone/icon.jpg" /></a>

Answer 2

Правильная схема URL - это тел:[число], так что вы бы сделали

<a href="tel:[phone]"><img src="callme.jpg" /></a>

Answer 3

Хочу добавить ответ здесь для полноты картины.

<a href="tel:[phone]">Call 123-4567</a>

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

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

<a href="callto:1234567">Call 123-4567</a>

Тем не менее, я думаю, что в последних мобильных браузерах (я точно знаю, на Android) сейчас tel синтаксис должен предлагать всплывающее окно доступных приложений, которые можно использовать для завершения вызывающего действия.

Answer 4

Кликабельный код ссылки на смартфон:

Следующая ссылка может быть использована для создания интерактивной ссылки телефона. Вы можете скопировать приведенный ниже код и вставить его на свою веб-страницу, а затем отредактировать под своим номером телефона. Этот код может работать не на всех телефонах, но работает на iPhone, Droid / Android и Blackberry.

<a href="tel:[phone]">1-847-555-5555</a>

Ссылки на телефонные номера можно использовать с тире, как показано выше, или без них, а также в следующем примере:

<a href="tel:[phone]">1-847-555-5555</a>

Также можно использовать любой текст в ссылке, если номер телефона настроен с помощью "tel:[phone]", как в этом примере:

<a href="tel:[phone]">Click Here To Call Support 1-847-555-5555</a>

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

ПРИМЕЧАНИЕ. Браузер iPhone Safari автоматически обнаружит номер телефона на странице и преобразует текст в ссылку для вызова, не используя какой-либо код на этой странице.

Код ссылки смартфона Wtai: Код ссылки wtai или "Интерфейс приложения беспроводной телефонии" показан ниже. Этот код считается правильным протоколом мобильного телефона и будет работать на смартфонах, таких как Droid, однако он может не работать для Apple Safari на iPhone, поэтому рекомендуется использовать приведенный выше код.

<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a> 

Answer 5

По сути, используйте <a> элемент с href attr, указывающий на номер телефона с префиксом tel:. Обратите внимание, что плюсы могут использоваться для указания кода страны, а дефисы могут использоваться просто для человеческого глаза.

Веб-документы MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

HTML<a>element (или элемент привязки) вместе со своим атрибутом href создает гиперссылку на другие веб-страницы, файлы, местоположения на той же странице, адреса электронной почты или любой другой URL-адрес.

[â € ¦]

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

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

Документы IETF

https://tools.ietf.org/html/rfc3966

В tel URI для телефонных номеров

URI "tel" имеет следующий синтаксис:

telephone-uri знак равно "tel:" телефонный абонент

[â € ¦]

Примеры

tel:[phone]: Этот URI указывает на номер телефона в США. Дефисы добавлены, чтобы сделать число более читабельным; они разделяют страну, код города и номер абонента.

tel:7042;phone-context=example.com: URI описывает местный номер телефона, действительный в контексте example.com.

tel:[phone];phone-context=+1-914-555: URI описывает местный телефонный номер, который действителен для определенного телефонного префикса.

Answer 6

Просто используйте тег привязки HTML <a> и запустите атрибут href с tel:. Предлагаю начинать телефонный номер с кода страны. обратите внимание на следующий пример:

<a href="tel:[phone]">NO Different What it is</a>

В этом примере код страны +98.

Подсказка: я знаю, что он так подходит для мобильных телефонов.tel: префиксные звонки FaceTime в macOS, но в Windows я не уверен, но я предполагаю, что это вызвало запуск Skype.

Для получения дополнительной информации: вы можете посетить список схем URL-адресов, поддерживаемых браузерами, чтобы узнать всеhref значения префиксов.

Answer 7

В настоящее время (2021 г.) для работы на ПК или планшете и Android (не тестировалось в IOS, но должно работать) вам необходимо добавить data-rel="external" к тегу "a", например:

      <a href="tel:[phone]" data-rel="external">Call Me...</a>