Включение и выключение ссылки Tel: Предпочтительно только CSS

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

Я хотел бы реализовать это на адаптивном веб-сайте... что-то вроде этого:

<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>

(тег span, который я планирую использовать, чтобы скрыть номер телефона с помощью CSS)

Идея состоит в том, что на рабочем столе вы увидите только «Позвоните нам! (555) 555-5555», но не фактическую ссылку.

Но когда мы уменьшим масштаб до мобильных устройств, вы увидите стилизованную ссылку, которая просто говорит: «Позвоните нам!» что вы можете нажать.

Я уверен, что есть способ сделать это с помощью JavaScript или JQuery... но есть ли способ сделать это с помощью CSS Media Queries?

Примечание. Визуальный стиль не проблема. Просто ищите разумное решение для концепции «переключения».

Заранее спасибо!


html css responsive-design tel
person Grapho    schedule 15.08.2013    source источник
comment
css имеет очень ограниченные возможности для изменения содержимого (особенно цели href) узла dom. вы бы хотели, чтобы какой-нибудь javascript обрабатывал мобильные устройства против мобильных устройств. обнаружение рабочего стола и поменять URL-адреса на основе этого. один хак в CSS будет состоять в том, чтобы иметь ДВА <a> и показывать/скрывать каждый в зависимости от того, в какой среде вы находитесь.   -  person Marc B    schedule 15.08.2013
comment
Невозможно надежно отличить телефон от любого другого типа устройства с помощью CSS. Медиа-запросы будут сообщать вам только конкретные сведения о дисплее (размеры, глубина цвета и т. д.), но не о том, способно ли устройство совершать телефонные звонки. Размеры - это не надежный способ обнаружения телефона, поскольку в наши дни многие телефоны имеют довольно большое разрешение.   -  person cimmanon    schedule 16.08.2013
comment
Другие люди ответили на ваш точный вопрос, но я не уверен, что это хорошая идея. Например, на настольных компьютерах Skype и Lync могут звонить по номерам прямо из браузера. На мобильных устройствах скрытие номера означает, что у пользователя нет возможности, например, прочитать номер другу.   -  person ehdv    schedule 16.08.2013

Ответы (4)


arrow_upward
1
arrow_downward

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

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

person Travis    schedule 15.08.2013
comment
Хороший практичный ответ! Я склонен слишком много думать об этих вещах и чрезмерно усложнять их ... Я сделаю это сейчас, чтобы придумать более шикарное решение, когда оно представится. - person Grapho; 16.08.2013
comment
Поверь мне, я делаю то же самое. Обычно я обращаюсь к SO, и кто-то скажет мне упростить его, и в конце концов он работает в большинстве случаев! Удачи тебе с твоим проектом! - person Travis; 16.08.2013

arrow_upward
3
arrow_downward

На самом деле нет ничего плохого в том, чтобы оставить ссылку на настольном компьютере. Это, например, позволит вам щелкнуть ссылку, чтобы позвонить через Skype или другую программу VOIP, которую вы, возможно, установили.

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

person Robert McKee    schedule 15.08.2013
comment
Это тоже хороший момент! Простые ответы обычно самые лучшие. Спасибо! - person Grapho; 16.08.2013

arrow_upward
2
arrow_downward

Вы можете создать 2 ссылки, одну для отображения на рабочем столе и одну для мобильных устройств.

OR

Используйте css, чтобы привязать якорь с номером телефона к курсору по умолчанию, чтобы он не выглядел как ссылка даже при наведении курсора. Чтобы дополнить это, вам нужно использовать js, чтобы отключить действие щелчка.

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

person Huangism    schedule 15.08.2013

arrow_upward
0
arrow_downward 

<a href="tel:123456789" class="tel-link">TEL: 123-456-789</a>

@media screen and (min-width: 600px) {
    .tel-link {
        color: #000 !important;
        text-decoration: none !important;
    }
}

Это отобразит номер телефона простым черным цветом для браузеров шириной более 600 пикселей (поэтому он не будет выглядеть как ссылка), даже если он все еще имеет ссылку. Я думаю, это нормально, потому что сейчас можно звонить с ПК.

person Sasori390    schedule 15.11.2014