Этот быстрый совет демонстрирует, как создавать ссылки на телефонные номера с помощью HTML. Методы, описанные в этом совете, работают как на устройствах Android, так и на iPhone и могут значительно улучшить восприятие посетителей мобильных веб-сайтов.
Если вам нужна дополнительная помощь по любому аспекту мобильной разработки, не стесняйтесь нанять одного из экспертов Envato Studio . В противном случае, читайте инструкции.
Телефонные ссылки по умолчанию
По умолчанию на iOS и Android браузер устройства «волшебным образом» создает ссылки из текста, интерпретируемого как номер телефона. Когда пользователь нажимает одну из этих ссылок, запускается приложение телефона устройства. Точные шаблоны телефонных номеров, которые будут автоматически превращаться в ссылки, различаются в зависимости от платформы, но я перечислил несколько шаблонов, которые я успешно протестировал ниже:
- 555-5555 ( только для iPhone )
- (555) 555-5555 ( Android + iPhone )
- +1 (555) 555-5555 ( только для iPhone )
- 555 5555 ( только для iPhone )
- 555 555 5555 ( Android + iPhone )
- +1 555 555 5555 ( только для iPhone )
- 555,5555 ( только для iPhone )
- 555,555,5555 ( Android + iPhone )
- +1 555,555,5555 ( только для iPhone )
Если ваш сайт или приложение использует один из вышеуказанных форматов для нескольких устройств, ваши пользователи уже смогут быстро совершать звонки, просто нажав на текст.
Создание телефонных номеров
Рецепт создания собственных ссылок на номера телефона прост. Вместо использования обычной ссылки, основанной на протоколе HTTP / S или файловой системе, вы можете использовать протокол «tel:». Это работает так же, как обычная ссылка, только вместо атрибута href указывающего на URL или файл, вы добавляете «tel:» или «tel: //» к номеру телефона.
Посмотрите следующие примеры, чтобы увидеть это в действии:
|
1
2
3
4
5
6
7
8
|
<!— Embedded within normal page text —>
<p>If you’d like to talk, <a href=»tel:5555555″>Call Me!</a></p>
<!— Linking a custom image —>
<a href=»tel://555-5555″><img src=»phone.png» alt=»Call Now!»
<!— Cross-platform compatible (Android + iPhone) —>
<a href=»tel://1-555-555-5555″>+1 (555) 555-5555</a>
|
ПРИМЕЧАНИЕ. Приведенный выше код должен быть протестирован на физическом устройстве. Он не будет работать на эмуляторе iOS SDK.
Последний пример фрагмента заслуживает особого внимания. Многие веб-разработчики не могут позволить себе обширное тестирование мобильных устройств на iPhone и Android, поэтому было бы легко упустить тот факт, что некоторые форматы телефонов, перечисленные в начале этого совета, не будут автоматически распознаваться при все устройства.
Поскольку распознаваемые форматы телефонов могут различаться в зависимости от устройства, я советую всегда заключать номера телефонов в ссылку с префиксом «tel: //». Это не только гарантирует, что наибольшее количество устройств будет связываться с приложением телефона, но это также представляется более явным, доступным и семантическим подходом к обработке телефонных ссылок.
Конечно, если создаваемый вами контент может просматриваться на устройстве без телефона, вы должны либо использовать язык на стороне сервера, чтобы добавлять ссылки «tel:» только при необходимости, либо проверять тип устройства с помощью JavaScript и добавлять ссылки на страницу постепенно, когда это применимо.
Отключение обнаружения ссылок
Как для Android, так и для iPhone вы можете легко отключить автоматическое связывание телефонных номеров с помощью следующего метатега:
|
1
|
<meta name=»format-detection» content=»telephone=no» />
|
Этот метатег отключит автоматическую привязку номера телефона, позволяя при этом вручную создавать ссылки на номера телефона, используя метод «tel: //», описанный выше.
Вот и все для этого урока! Если вы хотите продолжить разработку мобильных приложений, ознакомьтесь с огромным выбором полезных шаблонов приложений на Envato Market. Есть тысячи на выбор, как для Android, так и для iOS .
