«Переключение» на телефоне: связь и выключаться ... Предпочтительно CSS только

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

I хотел бы реализовать это в реагирующей сайт .. что-то вроде этого:

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

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

идея заключается в том, что на на рабочем столе вы увидите только «Call Us!» (5 55) 555-5555 ", но не является фактической ссылкой

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

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

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

Заранее благодарен!

источник

2013-08-15 Grapho

css имеет очень ограниченные возможности для изменения содержимого (особенно цель href) узла dom. вам нужно, чтобы какой-нибудь javascript обрабатывал мобильные v.s. обнаружение на рабочем столе и замена ссылок на них. один взлом в CSS должен состоять в том, чтобы иметь TWO '' и показывать/скрывать каждый, на основе какой среды вы находитесь. –

Невозможно надежно дифференцировать телефон и любой другой тип устройства с помощью CSS.Запросы в средствах массовой информации будут сообщать вам только конкретные сведения о дисплее (размеры, глубина цвета и т. Д.), Но не то, сможет ли устройство совершать телефонные звонки. Размеры: * не * надежный способ обнаружения телефона, так как многие телефоны имеют довольно большие разрешения в наши дни. – cimmanon

Другие люди ответили на ваш точный вопрос, но я не уверен, что это хорошая идея. Например, на настольных компьютерах Skype и Lync могут звонить номерам непосредственно из браузера. На мобильном телефоне скрытие номера означает, что у пользователя нет возможности - например, - прочитать номер другу. – ehdv

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

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

источник

2013-08-15 19:55:42 Travis

Хороший практический ответ! Я склонен слишком много думать об этих вещах и чрезмерно их компрометировать ... Я сделаю это сейчас, когда придумаю более шикарное решение. – Grapho

Поверьте мне, я делаю что-то. Я обычно обращаюсь к SO, и кто-то скажет мне упростить его, и он в конечном итоге работает больше всего в конце! Удачи с вашим проектом! – Travis

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

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

источник

2013-08-15 19:55:23

Это тоже хороший момент! Простые ответы, как правило, самые лучшие. Благодаря! – Grapho

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

ИЛИ

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

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

источник

2013-08-15 19:57:33 Huangism

<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; 
    } 
}

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

источник

2014-11-15 03:35:52 Sasori390

«Переключение» на телефоне: связь и выключаться ... Предпочтительно CSS только

ответ

Смежные вопросы