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

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

아이폰에서 볼 때 전화번호에서 기본 파란색 하이퍼링크 색상을 삭제하는 방법이 있나요?추가하는 특정 모바일 Safari 태그 또는 CSS와 같은 경우

다음 번호에 대해서만 사용할 수 있습니다.

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

하이퍼링크는 없지만 아이폰은 여전히 이 텍스트 번호를 하이퍼링크로 렌더링합니다.일부 웹 사이트에서 렌더링 문제가 발생하지만 왜 이런 문제가 발생하는지 알 수 없습니다.

이 글을 읽었어요.

모바일 HTML 렌더링 번호

하지만 그게 유일한 해결책일까요?

두 가지 옵션...

. 1. 을 설정합니다.format-detection메타 태그

포맷을 모두 하려면 , 을 「」에 합니다.headhtml★★★★

<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「」로 telcss 속성 셀렉터

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>를 사용하여 하고 리셋해야할

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

링크를 으로 하는 를 """로 합니다.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.) */ }

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

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

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

iPhone에서는 인식되지만, 다른 UA에서는 적용되지 않습니다(제가 아는 한 Android, Blackberry 등의 사용자/dev는 코멘트를 할 수 있습니다).

만약 사람들이 구글에서 이 질문을 발견한다면, 당신이 해야 할 일은 전화 번호를 링크로 취급하는 것이다. 애플은 자동으로 전화번호를 링크로 설정해 줄 것이다.

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

phone-icon이 켜져 있는 사이트에서는 tel:링크를 사용하고 있기 때문에, 여기에 게재된 대부분의 해결책에 다른 문제가 생기기 전에,

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

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

이를 tel: 사이트 전체의 링크 지정과 조합하여 링크합니다.

css를 사용하는 것은 관련된 Tel-link를 숨기기 때문에 선택사항이 아닙니다.

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

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

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

<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의 전화번호 색상을 덮어쓸 수 있습니다.

난 계속 그 사이를 왔다 갔다 했다.

1.

    <a href="tel:5551231234">

2.

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

데스크톱과 아이폰에서도 같은 코드를 사용하려고 합니다.문제는 첫 번째 옵션을 사용하고 데스크톱브라우저에서 클릭하면 오류 메시지가 표시되고 두 번째 옵션을 사용하면 iPhone iOS5에서 Tab-to-Call 기능이 비활성화된다는 것입니다.

그래서 시도해보니 아이폰은 전화번호를 CSS로 포맷할 수 있는 특별한 유형의 링크로 취급하고 있더군요.주소 HTML 태그와 할 수 .HTML 태그는 사용하지 해 주세요).<a>를 붙여 에서 CSS로 했습니다.

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

데스크톱 브라우저에서는 일반 텍스트가 표시되고 Safari 모바일에서는 기본 파란색과 밑줄이 없는 [콜/취소(Call/Cancel)]창이 탭에 팝업되고 링크로 표시됩니다.

특히 패딩/마진을 사용할 때는 번호에 적용되는 css 규칙에 주의하십시오.

.<meta name="format-detection" content="telephone=no"> 가 아닌 의 태그에 들어 과 같이 예를 들어 다음과 같습니다. span { background:none !important; border:0; padding:0; }

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

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가 그들을 전화번호 링크로 만들 정도로 충분히 많았다.다행히 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 Yoomeme은 나를 위해 일한다:

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

이 x-ms-format-format="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>

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