iPhone / iOS에서 전화 번호의 파란색 스타일을 어떻게 제거합니까?

iPhone / iOS에서 전화 번호의 파란색 스타일을 어떻게 제거합니까?

---

iPhone에서 볼 때 전화 번호에서 기본 파란색 하이퍼 링크 색상을 제거하는 방법이 있습니까? 추가 할 특정 모바일 사파리 태그 나 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">

더보기 애플 고유의 메타 태그 키 .

참고 : 이 번호가있는 페이지에 전화 번호가있는 경우 수동으로 링크 형식으로 지정해야합니다.

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

---

2. 메타 태그를 설정할 수 없습니까? 사용하고 싶 css습니까?

두 가지 css옵션 :

---

옵션 1 (웹 페이지에 적합)

이 CSS 속성 선택기를 사용하여 href값으로 시작하는 대상 링크 tel:

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.

---

David Thomas의 초기 제안에 대해 자세히 설명하면 다음과 같습니다.

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.) */ }

전화 번호 링크에 클래스가 적용되었다는 내용의 문서를 보지 못했기 때문에 다른 스타일 을 사용 하려는 링크에 클래스 / ID를 추가 해야합니다.

또는 다음을 사용하여 링크 스타일을 지정할 수 있습니다.

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

이것은 iPhone에서 이해되며 다른 UA는 (Android, Blackberry 등 사용자 / 개발자가 언급 할 수있는 한) 적용되지 않습니다.

---

사람들이 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;}

---

전화 아이콘이있는 사이트에서 tel : 링크를 사용하기 때문에 여기에 게시 된 대부분의 솔루션에 다른 문제가 있습니다.

메타 태그를 사용했습니다.

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

이것은 tel : 을 지정하는 것과 결합되어 사이트 전체에 링크 되어야합니다!

css를 사용하는 것은 관련 전화 링크를 숨기므로 실제로는 옵션이 아닙니다.

---

오래된 질문이지만 위의 답변 중 어느 것도 나에게 좋지 않았으므로 어떻게 해결했는지 게시합니다.

목록에 전화 번호가 있습니다.

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

CSS :

.phone_menu{
  color:orange;
}

그러나 iPad / iPhone에서는 검은 색이므로 CSS에 이것을 추가했습니다.

.phone_menu a{
  color:orange;
}

---

전화 번호 중간에 숨겨진 개체를 추가하여 간단한 트릭이 나에게 효과적이었습니다.

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

이렇게하면 IOS의 전화 번호 색상을 재정의하는 데 도움이됩니다.

---

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

---

According to Beau Smith from this subject: How do I remove the blue styling of telephone numbers on iPhone/iOS?

You should apply "tel:" in the href attribute of your link like this:

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

It will remove any additionnal style and DOM to the phone number string.

---

I’ve been going back and forth between

1.

    <a href="tel:5551231234">

2.

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

Trying to make the same code work for desktop and iPhone. The problem was that if the first option is used and you click it from a desktop browser it gives an error message, and if the second one is used it disables the tab-to-call functionality on iPhone iOS5.

So I tried and tried and it turned out that iPhone treats the phone number as a special type of link that can be formatted with CSS as one. I wrapped the number in an address tag (it would work with any other HTML tag, just try avoiding <a> tag) and styled it in CSS as

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

and it worked - in a desktop browser showed a plain text and in a Safari mobile showed as a link with the Call/Cancel window popping up on tab and without the default blue color and underlining.

Just be careful with the css rules applied to the number especially when using padding/margin.

---

No need to remove format detection by using <meta name="format-detection" content="telephone=no">. Try using phone number in any tag rather then anchor tag and style it accordingly e.g.: span { background:none !important; border:0; padding:0; }

---

<meta name="format-detection" content="telephone=no">. This metatag works in the default Safari browser on iOS devices and will only work for telephone numbers that are not wrapped in a telephone link so

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

the first line will not be formatted as a link if you specify the metatag but the second line will because it's wrapped in a telephone anchor.

---

You can forego the metatag all-together and use a mixin such as

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

to maintain intended styling of your telephone numbers, but you must make sure you wrap them in a telephone anchor.

If you want to be extra cautious and protect against the event of a telephone number which is not properly formatted with a wrapping anchor tag you can drill through the DOM and adjust with this script. Adjust the replacement pattern as desired.

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

or even better without 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>');

---

If you don't intend to have any telephone numbers on your page, then <meta name="format-detection" content="telephone=no"> will work just fine. But rhetorically speaking, what if you intend to use a mix of phone and non-phone numbers?

Assuming you're just hard-coding numbers into your HTML, the "insert stuff in the middle of your digits" hacks will work. But they are of little to no use for dynamic pages, such as using PHP to output numerical data from a query.

As an example, I was generating a list of city populations. Some of the populations were large enough to cause Mobile Safari to turn them into phone number links. Fortunately, all I had to do was use PHP number_format() around the array output to insert "thousands" commas:

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

This formatting was enough to convince Mobile Safari that there was a somewhat more specific purpose for the number, so it didn't default my larger numbers into telephone links anymore. The same would hold true for the suggestion by @davidcondrey of using <a href="tel:18001234567">1-800-123-4567</a> to specify a purpose to the number.

Bottom line is that Safari Mobile apparently does pay attention to semantics. Given that HTML5 is built around semantic markup, and search engines are relying on semantic markup, I intend to use it as much as I can.

---

Putting the number in a <fieldset> will prevent iOS from converting the number to a link for some reason. In some cases this could be the right solution. I don't advocate a blanket disabling of converting to links.

---

iOS makes phone numbers clickable by defaults (for obvious reasons). Of course, that adds an extra tag which is overriding your styling if your phone number isn’t already a link.

To fix it, try adding this to your stylesheet: a[href^=tel] { color: inherit; text-decoration: none; }

That should keep your phone numbers styled as you expect without adding extra markup.

---

Try using putting the ASCII character for the dash in between the digit separations.

from this: -

to this: –

ex: change 555-555-5555 => 555–555–5555

---

This did it for me:

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

You can find more info here.

---

In Joomla Yootheme works for me:

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

---

This x-ms-format-detection="none" attribute handle the format phone.

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>

---

If you simply want to avoid phone numbers being links at all try using the font tag:

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

참고URL : https://stackoverflow.com/questions/3736807/how-do-i-remove-the-blue-styling-of-telephone-numbers-on-iphone-ios