Как убрать синий стиль телефонных номеров на iPhone / iOS?

Question

Есть ли способ удалить синий цвет гиперссылки по умолчанию из номера телефона при просмотре на iPhone?Как конкретный тег Mobile Safari или CSS для добавления?

У меня есть это только для номера:

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

И нет никаких гиперссылок, но iPhone по-прежнему отображает этот текст в видегиперссылка.У меня есть проблема с рендерингом на некоторых моих сайтах, но я не могу понять, почему это происходит.

Я прочитал этот пост:

Мобильные номера рендеринга HTML

Но возможно ли это единственное решение?

Answer 1

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

Answer 2

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

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

Это должно сохранять ваши телефонные номера в стиле, как вы ожидаете, без добавления дополнительной разметки.

Answer 3

Ввод числа в

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

Answer 4

Если вы не хотите, чтобы на вашей странице были номера телефонов, <meta name="format-detection" content="telephone=no"> будет работать нормально.Но если говорить риторически, что если вы намереваетесь использовать сочетание телефонных и не телефонных номеров?

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

В качестве примера я составил список населения города.Некоторые группы населения были достаточно большими, чтобы Mobile 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 построен на семантической разметке, а поисковые системы полагаются на семантическую разметку, я намерен использовать ее как можно чаще.

Answer 5

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

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

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

---

Вы можете полностью отказаться от метатэга и использовать миксин, такой как

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>');

Answer 6

Этот атрибут 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>

Answer 7

У меня в Joomla Yootheme работает:

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

Answer 8

Если вы просто хотите, чтобы номера телефонов не были ссылками, попробуйте использовать тег шрифта:

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

Answer 9

Это сделало это для меня:

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

Вы можете найти больше информации здесь .

Answer 10

Попробуйте использовать символ ASCII для тире между разделениями цифр.

из этого: -

в следующее: –

пример: изменить 555-555-5555 => 555–555–5555