Html ссылка на номер телефона: Как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства? – Как в HTML сделать ссылку на телефон, емейл и скайп

Leave a Comment / Html / By /

Как сделать ссылку изображения на номер телефона только на мобильном телефоне с помощью CSS и HTML?

Вместо того чтобы просто иметь текст например

Если я это сделаю <a href="tel:18001234567">1-800-123-4567</a> тогда он будет разбит на рабочих столах.

Если я сделаю (800) 123-4567 , то он будет отображаться как номер на рабочем столе, но должен автоматически стать ссылкой на Android и iPhone

Но если я хочу сделать такой образ, как этот:

fake button for phone

Есть ли решение, возможно, с помощью запроса media или любым другим способом. Что я могу сделать так, чтобы это изображение отображалось на рабочем столе и мобильном телефоне, но на мобильном функционировало как кнопка? Это для email так что только HTML/CSS вариантов.

Основываясь на ответах у меня есть это и это тоже не сработало:

@media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; }  /* show it on small screens */
#my-link { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; }   /* hide for all below 401px*/
#my-link { display: block; }   /* show for all above 401px*/
}

Вместе с:

<div>
<a href="tel:1-800-328-4766">Call Now!</a>
</div>

<div>
Call 1-800-328-4766
</div>

И это все еще не работает, обе ссылки появляются.

html email css3 media-queries tel

Поделиться Источник Ryan     05 июня 2013 в 13:04

4 Ответов


3

Удалил мой старый ответ, потому что он был плохим. Пожалуйста, попробуйте это http://jsfiddle.net/qDUqS/

Номер телефона выглядит одинаково как на маленьком экране, так и на большом, но он действует как ссылка, только на меньшем экране.

Html:

<span><img src="http://goo.gl/PdeeU" /><a href="tel:18001234567">1-800-123-4567</a><p>1-800-123-4567</p></span>

CSS:

.phone
{
    background-color: #152C48;    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
}
a
{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 0px;
}
img
    {
        vertical-align: middle;
        width: 24px;
        height: 24px;
        padding: 0px;
    }
p
{
    display: none;
    color: #ffffff;
    padding: 0px;
}

@media only screen and (min-width: 480px) and (max-width: 1920px)
{
    a
    {
        display: none;
    }
    p
     {
        display: inline-block;
     }
}

Поделиться Gimmy     05 июня 2013 в 18:39

Поделиться Saurabh Rana     05 июня 2013 в 13:47


0

NOTE: обновил свой код и все работает так, как должно быть сейчас. установите максимальную ширину в 9999px.

Рабочий JSFIDDLE

Сделайте div и поместите изображение внутри этого div:

<div></div>

css будет выглядеть так:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-image { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 9999px) {
  #my-image { display: none; }   /* hide for all below 401px*/
}

для вашей кнопки / ссылки вы можете сделать то же самое, но в противном случае:

<div></div>

css будет выглядеть так:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-link { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 9999px) {
  #my-link { display: block; }   /* show for all above 401px*/
}

Надеюсь, это поможет.

Поделиться Kees Sonnema     05 июня 2013 в 13:07


0

Ответ очень прост, просто добавьте непрозрачность «transparrency» на рабочий стол code.and скопируйте код на мобильный телефон, установив непрозрачность на 1.

Поделиться Peter Gruppelaar     04 января 2015 в 12:14

Похожие вопросы:


сделать номер телефона кликабельным для набора экрана на мобильном телефоне?

Как я могу сделать номер телефона, который повторяется в базе данных php из базы данных mysql? Я новичок в php и mysql и все еще учусь, пожалуйста, может кто-нибудь объяснить или показать мне, как…


Список HTML/CSS на мобильном телефоне

В следующем простом fiddle показан список с набором названий стран . На PC свойство height указывает странице отображать список вместо раскрывающегося списка, и, следовательно, видны n элементов. На…


Css-изображение на мобильном телефоне нарушено

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


Пробел в изображении-только на мобильном — (как сделать отзывчивый сайт)

я пытаюсь сделать так, чтобы пропасть между нижней частью моего div и моим изображением исчезла. Я попробовал уменьшить нижний край изображения, который worked…but только на ПК, если бы вы открыли…


Измерение уровня сигнала телефона «real» на мобильном телефоне

Я хочу программно измерить уровень сигнала телефона в мобильном телефоне. Я на самом деле не забочусь о мобильном телефоне или среде программирования: он может быть основан на android или windows…


Шрифты слишком большие на мобильном телефоне — как ограничить размер или исправить?

Я использую CSS, и некоторые шрифты на моем мобильном телефоне разбивают Divs и не портят rest из html. Есть ли способ ограничить размер шрифта в css стиле ДИВС? Например, у меня есть кнопка,…


Сделать отключить ввод типа текста на мобильном телефоне и редактируемый на рабочем столе через CSS?

Как я могу сделать тип ввода текста для отключения через CSS на мобильном телефоне? Вот мой код: <input id=example class=ui-timepicker-input placeholder= type=text> Так как typepad открывается…


Как создать ссылку, которая звонит по номеру телефона на мобильном телефоне?

Можно ли создать изображение, которое при нажатии (на мобильном телефоне)звонит по номеру? или кладет номер в телефонную трубку, готовую к звонку? Я уверен, что видел нечто подобное раньше на…


Bootstrap отзывчивость на мобильном телефоне

у меня есть эта странная проблема. Я только что настроил страницу, созданную с помощью bootstrap 3.0.3, на моем собственном веб-сервере. Моя проблема-это отзывчивая часть, она отлично работает в…


Как сделать ссылку ImageView на указанный номер телефона?

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


Номер телефона в виде ссылки (кликабельный) на мессенджеры с сайта

Подробности
HTML

Номер телефона в виде ссылки (кликабельный) на мессенджеры с сайта

С каждым годом интеграция с социальными сетями и мессенджерами происходит все глубже. Многие компании и организации в борьбе за клиента, стараются сделать обратную связь как можно проще и удобнее. Одна из таких возможностей – сделать кликабельные номера телефонов на сайте.

 

 

Введение

 

Если вы установите кликабельные номера телефонов на своем сайте, то при нажатии они будут сразу переводить в мессенджера Viber, WhatsApp или Telegram, что позволит быстро установить коммуникацию с вами.

Кликабельные ссылки на мессенджеры

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

 

Кликабельная ссылка Viber

 

Для мобильных и ПК устройств:



<a href="viber://chat?number=%2B79630745396">Написать в Viber</a>

«%2B» — это «+» в HTML кодировке.

 

Кликабельная ссылка WhatsApp

 

Для мобильных и ПК устройств:



<a href="whatsapp://send?phone=+79630745396">Написать в WhatsApp</a>

 

Кликабельная ссылка Telegram

 

С Telegram-ом это делается немного по-другому. Если для Viber и WhatsApp мы использовали номер телефона для вызова чата, то в Telegram используется логин (имя) пользователя.

 

Для мобильных устройств:



<a href="tg://resolve?domain=LOGIN">Написать в Telegram</a>

 

Ссылка для ПК (чат откроется в браузере):



<a href="https://telegram.me/LOGIN">Написать в Telegram </a>

 

Кликабельная ссылка для звонка

 

Для мобильных и ПК устройств:



<a href="tel:+79630745396">Позвонить</a>

 

Заключение

 

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

 

Всем удачи!

 

Возможно вам так же будет интересно:

Добавить комментарий

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

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

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

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

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

<a href=»tel:+79876543210″>+7 (987) 654-32-10</a>

Правильный формат телефона на сайте

К сожалению, не существует общепринятых правил правильного формата телефона. Но все же стоит помнить о некоторых особенностях. 

  1. Чтобы телефон воспринимался мобильными устройствами даже как текст обязательно используйте префикс (код страны) +7 (987) 654-32-10.
  2. Код города или оператора мобильной связи можно указывать через пробел со скобками или без.
  3. В хвосте указываем цифры через пробелы или дефис, но только не слитно, так как визуально такой номер трудно воспринимать.

Как отключить выделение телефона

Существует проблема, когда кликабельный номер, на телефонах или ПК, не воспринимает ваши стили CSS, а использует свой невзрачный стиль. Всё работает, но такая ссылка выбивается из общего стиля на сайте.

Пример ссылки телефона на сайте

Чтобы отключить выделение номера телефона на мобильных устройствах можно воспользоваться одним из способов:

1. Добавить на все страницы сайта в <head></head> следующий код:

<meta name=»format-detection» content=»telephone=no»>

2. Если такой возможности нет, то используем свои стили, оборачивая номер телефона в

<span style=”ваши_стили”></span>

Ссылки на мессенджеры

Дополнением станут ссылки на популярные мессенджеры – хорошая альтернатива сотовой связи в наше время. При переходе по ссылке открывается необходимый мессенджер на телефоне или на ПК.

Ссылка Telegram на сайте

<a href=»https://t.me/ваш_ник» target=»_blank»>Telegram</a>

Ссылка WhatsApp на сайте

<a href=»https://api.whatsapp.com/send?phone=79876543210″ target=»_blank»>WhatsApp</a>

Ссылка Viber на сайте

Работает только при условии, что пользователь открывает ссылку с установленным приложением Viber на его телефоне.

<a href=»viber://add?number=79876543210″>Viber</a>

Кликабельные ссылки с номером телефона, skype, facetime и прочего.

В этой статье я приведу примеры новых схем задания URL ссылок, клик по которым поможет сразу набрать номер телефона, позвонить в skype, facetime прямо с сайта.

Номер телефона

Вообще первым стандартом для ссылки набора номера является использование схемы tel:, скопированным из японских стандартов i-Mode. Схема описана в стандарте RFC 5341, но эти параметры работали не на всех устройствах.

На сегодняшний день мы имеем поддержку tel: почти на каждом мобильном браузере, таких как: Safari, Android browser, webOS браузер, Symbian браузер, Internet Explorer и т.д.

Ссылка для набора номера выглядит так:

<a href="tel:+7928229933">Позвонить нам!</a>

Рекомендуется в ссылке писать номер, начиная с кода страны (в примере +7), т.к. на сайт могут зайти пользователи и с другой страны.

Тональный набор номера DMTF

Некоторые устройства поддерживают тональный набор номера. Это полезно для различных служб поддержки системы или голосовой почты. Вы можете создать ссылку с текстом «позвоните по этому номеру, когда ответят нажмите 2, подождите 2 секунды и введите код 913#». Это делается с помощью параметра postd после номера, синтаксис такой: ;postd=. Вы можете использовать цифры, *, #, а также р для одного-секундной паузы и W для ожидания тональной паузы.

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

Автоматическое определение номера на странице

Некоторые современные браузеры (BlackBerry и Safari в iOS) умеют сами искать номера, email на странице и делать их кликабельными. Это можно запретить с помощью следующих метатегов:

<!-- for iOS and Android -->
<meta name="format-detection" content="telephone=no">

<!-- for BlackBerry -->
<meta http-equiv="x-rim-auto-match" content="none">

Запуск приложений

Есть некоторые приложения, которые могут быть открыты с помощью ссылки, в основном из iOS. Например, для использования Facetime в iPhone, IPod Touch, iPod. Начиная с IOS 4.1, можно использовать FaceTime: URI, чтобы открыть приложение Facetime и позвонить кому-то, например:

<a href="facetime://5555555555">Позвонить по Facetime!</a>

Skype для IOS так же имеет свой собственный URI для набора номера. Для этого нужно имя пользователя в Skype. При желании можно добавить параметр ?call в конце ссылки, чтобы немедленно начать вызов. Без этого параметра просто откроется профиль пользователя.

<a href="skype:skype_user?call">Набрать по скайпу!</a>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *