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

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

이 주제의 Beau Smith에 따르면 , iPhone / iOS에서 전화 번호의 파란색 스타일을 어떻게 제거합니까?

다음과 같이 링크의 href 속성에 "tel :"을 적용해야합니다.

<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 규칙에주의하십시오.

를 사용하여 형식 감지를 제거 할 필요가 없습니다 <meta name="format-detection" content="telephone=no">. 전화 번호를 태그 대신 사용하고 태그를 고정한 후 스타일을 지정하십시오. 예 :span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. 이 메타 태그는 iOS 기기의 기본 Safari 브라우저에서 작동하며 전화 링크에 래핑되지 않은 전화 번호에서만 작동합니다.

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

귀하의 페이지에 전화 번호가 없다면, <meta name="format-detection" content="telephone=no"> 잘 작동합니다. 그러나 수사적으로 말하면 전화 번호와 비 전화 번호를 혼합하여 사용하려면 어떻게해야합니까?

HTML에 숫자를 하드 코딩한다고 가정하면 "자릿수 중간에 물건 삽입"해킹이 작동합니다. 그러나 PHP를 사용하여 쿼리에서 숫자 데이터를 출력하는 것과 같이 동적 페이지에는 거의 사용하지 않습니다.

예를 들어 도시 인구 목록을 생성했습니다. 일부 인구는 Mobile Safari가 전화 번호 링크로 전환 할 수있을 정도로 컸습니다. 다행히도 number_format()"천"쉼표를 삽입하기 위해 배열 출력에서 PHP 를 사용하기 만하면됩니다.

<?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>