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

Html / 글쓴이

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를 사용하는 것은 관련 전화 링크를 숨기므로 실제로는 옵션이 아닙니다.

답변

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

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