Чи є спосіб видалити синій колір гіперпосилання за замовчуванням з телефонного номера при перегляді на iPhone? Як додати певний тег мобільного Safari або CSS?

У мене це є лише номер:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

І гіперпосилань немає, але iPhone все ще надає цей текстовий номер як гіперпосилання. У мене є проблема візуалізації на деяких моїх веб-сайтах, але я не можу зрозуміти, чому це відбувається.

Я читав цю публікацію:

Номери мобільного HTML-рендерінгу

Але чи можливе єдине рішення?

Два варіанти ...

1. Встановіть format-detectionметатег.

Для того, щоб видалити всі автоматичне форматування номерів телефонів, додати це до headвашого htmlдокументу:

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

Перегляньте більше специфічних для тегів Apple метатегів .

Примітка. Якщо у вас є телефонні номери на сторінці з цими номерами, їх слід вручну відформатувати як посилання:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Неможливо встановити метатег? Хочете скористатися css?

Два cssваріанти:

Варіант 1 (краще для веб-сторінок)

Націляйте посилання на hrefзначення, починаючи з telцього засобу вибору атрибутів css:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

Варіант 2 (краще для html-шаблонів електронної пошти)

Крім того, ви можете, коли ви не можете встановити метатег (наприклад, у html-пошті), загортати номери телефонів у теги посилань / прив’язки ( <a href=""></a>), а потім націлювати їх на стилі, використовуючи css, подібний до наведеного нижче, і коригувати конкретні властивості, які потрібно скинути :

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

Якщо ви хочете націлити конкретні посилання, використовуйте класи на ваших посиланнях, а потім оновіть селектор css вище на a[x-apple-data-detectors].class-name.

Просто для детальної розробки попередньої пропозиції Девіда Томаса:

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

Додавання цього до вашого css залишає функціональний номер телефону, але знімає підкреслення та відповідає кольору, який ви використовували спочатку.

Дивно, що я можу розмістити власну відповідь, але не можу відповісти на чужі.

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

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

Я не бачив документації, яка передбачає, що клас застосовується до посилань на номер телефону, тому вам доведеться додавати класи / ідентифікатори до посилань, які ви хочете мати інший стиль.

Можна також стилізувати посилання за допомогою:

a[href^=tel] { /* css */ }

Що розуміє iPhone, і не застосовуватиметься (наскільки я знаю, можливо, користувачі Android / Devs можуть коментувати Android, Blackberry тощо) будь-яким іншим UA.

Якщо люди знайдуть це питання в Google, все, що вам потрібно зробити, - це розглядати номер телефону як посилання, оскільки Apple автоматично встановить його як один.

ваш HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

ваш css

#phone-text a{color:#fff; text-decoration:none;}

Оскільки ми використовуємо тел: посилання на сайт із ввімкненою піктограмою телефону: перед більшістю розміщених тут рішень вводиться ще одна проблема.

Я використовував метатег:

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

Це поєднується із зазначенням тел: посилання на весь сайт, де його слід пов’язати!

Використання css - це справді не варіант, оскільки він приховує відповідні тел-посилання.

Простий фокус спрацював для мене, додавши прихований об’єкт посеред номера телефону.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

Це допоможе вам змінити колір номера телефону для IOS.

Старе запитання, але як жоден із наведених відповідей не був для мене гарним, я публікую, як я його вирішив

У мене в списку є номер телефону:

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

Але на iPad / iPhone він був чорним, тому я просто додав це до css:

.phone_menu a{
  color:orange;
}

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

За словами Бо Сміта з цієї теми: Як видалити синій стиль телефонних номерів на iPhone / iOS?

Ви повинні застосувати "tel:" в атрибуті href вашого посилання так:

<a href="tel:5551231234">555 123-1234</a>

Це видалить будь-який додатковий стиль та DOM до рядка номера телефону.

Я їхав між собою і назад

1.

    <a href="tel:5551231234">

2.

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

Намагаються, щоб той самий код працював для робочого столу та iPhone. Проблема полягала в тому, що якщо використовується перша опція, і ви натискаєте її на робочий стіл браузера, він видає повідомлення про помилку, а якщо використовується другий, він вимикає функцію вкладки для виклику на iPhone iOS5.

Тому я спробував і спробував, і виявилося, що iPhone трактує номер телефону як особливий тип посилання, який можна відформатувати за допомогою CSS як єдиний. Я загорнув номер у тег адреси (він буде працювати з будь-яким іншим тегом HTML, просто спробуйте уникнути <a>тегу) і стилізував його у CSS як

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

і це спрацювало - у настільному браузері показаний звичайний текст, а в мобільному телефоні Safari показано як посилання на спливаюче вікно виклику / скасування на вкладці та без синього кольору та підкреслення за замовчуванням.

Будьте обережні з правилами css, застосованими до числа, особливо при використанні padding / margin.

Не потрібно видаляти виявлення формату за допомогою <meta name="format-detection" content="telephone=no">. Спробуйте використовувати номер телефону в будь-якому тезі, а не прикріплювати тег і відповідно до цього стилю, наприклад:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Цей метатег працює у веб-переглядачі Safari за замовчуванням на пристроях iOS і працюватиме лише для телефонних номерів, не загорнутих у телефонний зв’язок.

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

перший рядок не буде форматований як посилання, якщо ви вказали метатег, але другий рядок буде, тому що він загорнутий у телефонний якір.

Ви можете відмовитися від метатегів разом і використовувати Mixin, наприклад

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

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

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

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

а ще краще без jQuery

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

Якщо ви не маєте наміру мати будь-які телефонні номери на своїй сторінці, тоді це <meta name="format-detection" content="telephone=no"> буде добре. Але риторично кажучи, що робити, якщо ви маєте намір використовувати суміш телефонних та нетелефонних номерів?

Якщо припустити, що ви просто жорстко кодуєте номери у своєму HTML, хаки "вставити середину ваших цифр" будуть працювати. Але для динамічних сторінок вони мало корисні, як-от використання PHP для виведення числових даних із запиту.

Як приклад, я формував список населення міста. Деякі групи населення були досить великими, щоб мобільний Safari перетворив їх на посилання на телефонні номери. На щастя, все, що я повинен був зробити, це використовувати PHP number_format()навколо виводу масиву, щоб вставити "тисячі" коми:

<?php echo number_format($row["population"]) ?>

Такого форматування було достатньо, щоб переконати Mobile Safari, що для цього номера є дещо більш конкретна мета, тому він більше не зазначав мої більші номери на телефонні посилання. Те саме стосується пропозиції @davidcondrey щодо використання <a href="tel:18001234567">1-800-123-4567</a>призначення для числа.

Підсумок полягає в тому, що Safari Mobile очевидно звертає увагу на семантику. Зважаючи на те, що HTML5 побудований на основі семантичної розмітки, а пошукові системи покладаються на семантичну розмітку, я маю намір використовувати її наскільки це можливо.

Якщо розмістити номер у <fieldset>, це не дозволить iOS перетворити номер у посилання з якихось причин. У деяких випадках це може бути правильним рішенням. Я не прихильник відключення переходу на посилання.

iOS робить номери телефонів, які можна натискати за замовчуванням (з очевидних причин). Звичайно, це додає додатковий тег, який переважає ваш стиль, якщо ваш номер телефону вже не є посиланням.

Щоб виправити це, спробуйте додати це до таблиці стилів: a[href^=tel] { color: inherit; text-decoration: none; }

Це повинно підтримувати ваші телефонні номери, як ви очікували, без додавання додаткової розмітки.

Спробуйте використати символ ASCII для тире між розрядними знаками.

від цього: -

до цього: –

напр .: зміни 555-555-5555=>555–555–5555

Це зробило це для мене:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

Більше інформації ви можете знайти тут .

У Joomla Yootheme працює для мене:

a:not([class]) {
    color: #fff !important;
}

Цей атрибут x-ms-format-detection = "none" обробляє телефон формату.

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>

Якщо ви просто хочете, щоб телефонні номери взагалі не були посиланнями, спробуйте скористатися тегом шрифту:

<p>800<font>-</font>555<font>-<font>1212</p>