Href tel не работает

Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы

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

Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:

При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.

Лучше использовать в ссылке tel параметр:

Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.

Спецификация и поддержка

По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.

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

Как реагируют типовые программы:

Safari — запускает FaceTime.

Opera (Windows) — в статье-исходнике сказано, что всплывает окно с ошибкой мол нельзя распознать протокол, но у меня лично было предложение открыть Skype (возможно, потому что он установлен).

Opera (OSX) — появляется запрос на использование другого приложения.

iOS — на выбор вам предлагают позвонить, отправить сообщение или добавить в контакты.

Internet Explorer 11 Mobile — инициирует звонок.

Internet Explorer 11 — в оригинальном посте говорится, что появится окно с информацией о вызове какого-то приложения, но у меня в Windows (ПК) просто была ошибка протокола.

Chrome — на декстопе ничего не происходило, но в смартфоне открылось окно со звонком и введенным телефоном.

Edge — запрос на открытие соответствующей программы.

BlackBerry 9900 — пытается инициировать набор номера.

Android — запуск приложения телефона.

Про Firefox ничего сказано не было, но я встречал информацию о возможных ошибках на Win ПК. В комментариях дополнили, что в Mac при этом вызывается FaceTime.

Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.

Оформление ссылки tel: в HTML

Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

Советы по созданию ссылки на номер телефона

Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

Определение мобильных устройств

Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:

Здесь, в зависимости от результата условия в IF, в блоке с создается либо ссылка на телефон с tel:, либо просто HTML текст.

SEO оптимизация

В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.

Beach Bunny Swimwear

Теоретически, в линке можно еще указать rel=»nofollow».

Убираем автоопределение

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

Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

Источник

href=tel: 555 ссылка не работает в мобильном safari

Я разрабатываю мобильную страницу и использую следующий (стандартный, я считаю) код, чтобы заставить телефон набрать номер телефона.

это отлично работает в android, но Mobile Safari я получаю следующую ошибку:

Не Удается Открыть Страницу
Safari не может открыть страницу, потому что адрес неверный

4 ответов

ваша наценка в порядке, и она работает на моем iPhone (3GS, работает 4.3.5). Он не работает на симуляторе iOS (да, есть ошибка «не удается открыть страницу — Safari не может открыть страницу, потому что адрес недействителен»), но тогда я бы не ожидал этого, учитывая, что вы не можете совершать звонки на него (либо это, либо более старая версия iOS виновата).

включает или отключает автоматическое обнаружение возможных номера телефонов на веб-странице в Safari на iOS. Синтаксис Обсуждения по умолчанию Safari на iOS обнаруживает любую строку, отформатированную как телефон номер и делает его ссылкой, которая вызывает номер. Определяющий telephone=no отключает эту функцию. Доступность доступна в iOS 1.0 и потом. Уровень Поддержки Apple расширение.

для номера телефона для работы в Safari / iOS вам нужно правильно отформатировать телефон, как это было бы указано в старом объявлении.

Если у вас все еще есть проблема с вашим номером телефона, не появляющимся на safari, у меня была точно такая же проблема, я взял, что если вы не используете веб-дружественный шрифт, он не будет отображаться попробуйте изменить шрифт для номера на Verdana или Arial. Я использовал веб-шрифт google, который должен быть веб-дружественным, но даже это сломало мой номер.

надеюсь, что это работает.

дайте мне голосовать, если это действительно так;)

Источник

Формат ссылки для телефонных звонков в мобильных браузераx (href=”tel:…”)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочтут позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на мобильном девайсе).

Мы уже писали об URI-схемах для отправки смс тут.

Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) является использование tel: схемы. Он был предложен в качестве стандарта в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.

Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer, Opera Mini и т.п.

Очень простой и лаконичный синтаксис:

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

На десктопе, с установленным Skype (или подобным софтом), система попросит вас подтвердить открытие внешнего приложения, при клике на такую ссылку.

Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.

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

В целом все, что хотелось сказать. Используйте tel: URI-схемы и будет вам счастье 😉

Источник

href=tel:555 link not working in mobile safari

I’m designing a mobile page and am using the following (standard, I believe) code to make the phone dial a phone number.

This works fine in android but Mobile Safari I get the following error:

Cannot Open Page
Safari cannot open the page because the address is invalid

7 Answers 7

Your mark-up is fine, and it works on my iPhone (3GS, running 4.3.5). It doesn’t work on the iOS simulator (yep, there’s the «Cannot Open Page — Safari cannot open the page because the address is invalid» error), but then I wouldn’t expect it to, given that you can’t make calls on it (either that or the older version of iOS is at fault).

This Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS. Syntax Discussion By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature. Availability Available in iOS 1.0 and later. Support Level Apple extension.

for a telephone number to work in Safari/iOS you need to format the telephone properly like it would be listed in an old ad.

You may want to add target=»_blank» in the hyperlink tag.

It works for me.

Read more about target=»_blank» at this link

If you still have a problem with your telephone number not showing up on safari i had the exact same problem, i picked up that if you do not use a web friendly font it will not display try and change your font for the number to Verdana or Arial. I used google web font which should be web friendly but even that broke my number.

Hope this works.

The following worked for me, hope it helps.

It should work on both ios chrome and safari.

2021 Update here, I’m building an Ionic app for android and ios, and was having troubles getting the link for phones to work in safari, what I did that solved the issue was creatig a small utility function (typescript) that cleared the phone number of any characters this way:

Characters like «+» or «-» cause safari to not handle href:tel properly (despite Chrome or Firefox working fine with that)

Hope this helps somebody else that is new like me building apps for ios

Источник

Как сделать ссылку на телефон HTML?

Приветствую вас, дорогие друзья на сайте Impuls-Web!

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

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

Навигация по статье:

В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.

Протокол HTML5 для ссылок на телефон

Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег … и в атрибуте href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:

Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.

Решение проблемы с определением ссылки на телефон HTML на ПК

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

Для решения данной проблемы есть очень интересный скрипт. Но его использование немного затруднит добавление ссылки на телефон HTML.

1. На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:

Источник