Mobile Safari에서 전화 번호 연결을 비활성화하는 방법은 무엇입니까?

iPhone의 Safari는 전화 번호에 표시되는 일련의 숫자에 대한 링크를 자동으로 생성합니다. IP 주소가 포함 된 웹 페이지를 작성 중이며 Safari에서이 주소를 전화 번호 링크로 바꾸고 있습니다. 전체 페이지 또는 페이지의 요소에 대해이 동작을 비활성화 할 수 있습니까?

Safari HTML Reference 에 따르면 이것이 옳은 것처럼 보입니다 .

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

이 기능을 비활성화했지만 전화 링크를 원하는 경우 "전화"URI 체계를 계속 사용할 수 있습니다.

다음은 Apple Developer Library의 관련 페이지 입니다.

특정 요소에 대한 전화 파싱 모양을 비활성화하려면이 CSS가 트릭을 수행하는 것 같습니다.

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

첫 번째 규칙은 클릭을 비활성화하고 두 번째 규칙은 스타일을 관리합니다.

너비가 0 인 조이너를 사용합니다. ‍

전화 번호 어딘가에 넣으면 효과가 있습니다. BrowserStack (및 이메일의 경우 Litmus)에서 테스트되었습니다.

나는 같은 문제를 겪고 있었다. UIWebView에서 데이터 탐지기를 끌 수있는 속성을 찾았습니다.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

이것을 추가하면, 그것이 당신이 찾고있는 것이라고 생각합니다.

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

웹뷰 솔루션!

PhoneGap-iPhone / PhoneGap-iOS 응용 프로그램의 경우 프로젝트의 응용 프로그램 대리인에게 다음을 추가하여 전화 번호 감지를 비활성화 할 수 있습니다.

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

출처 : PhoneGap-iOS에서 전화 감지를 비활성화합니다 .

페이지의 일부에서 전화 번호 감지를 비활성화하려면 영향을받는 텍스트를 href = "#"로 앵커 태그로 묶으십시오. 이렇게하면 모바일 Safari와 UIWebView가 그대로 두어야합니다.

<a href="#"> 1234567 </a>

내가 해결책을 찾았다 고 생각하십시오 <label>. 요소 안에 숫자를 넣으십시오 . 다른 태그는 시도하지 않았지만 속성이 <div>있더라도 홈 화면에서 활성화 상태로 두었습니다 telephone=no.

이전 의견에서 메타 태그가 작동 한 것으로 보이지만, 어떤 이유로 든 적어도 일부 조건에서는 iOS의 이후 버전에서 손상되었습니다. 4.0.1을 실행 중입니다.

<a>레이블을 값 javascript: void(0)으로 사용할 수도 있습니다 href.

다음과 같은 예 :
<a href="javascript: void(0)">+44 456 77 89 87</a>

나는 같은 문제가 있었지만 iPad 웹 앱에서.

불행히도 ...

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

...

0 = 0
9 = 9

... 일했다.

그러나 다음은 세 가지 못생긴 해킹입니다.

• 숫자 "0"을 문자 "O"로 교체
• 숫자 "1"을 문자 "l"로 교체
• 의미없는 스팬을 삽입하십시오. 예 : 555.5<span>5</span>5.5555

사용하는 글꼴에 따라 처음 두 개는 거의 눈에 띄지 않습니다. 후자는 분명히 불필요한 코드를 포함하지만 사용자에게는 보이지 않습니다.

Kludgy는 확실하게 해킹하며 데이터에서 코드를 동적으로 생성하거나 데이터를 이러한 방식으로 오염시킬 수없는 경우에는 실행되지 않을 수 있습니다.

그러나 핀치에 충분합니다.

iPad Safari에서 전화 번호 링크로 전환 할 것을 주장한 ABN (호주 사업자 번호)이있었습니다. 어떤 제안도 도움이되지 않았습니다. 내 해결책은 숫자 사이에 img 태그를 넣는 것이 었습니다.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

이 클래스는 img 태그의 내용을 문서화하기 위해서만 존재합니다.

iPad 1 (4.3.1) 및 iPad 2 (4.3.3)에서 작동합니다.

내 경험은 다른 사람들과 동일합니다. 메타 태그 ...

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

... 웹 사이트가 모바일 사파리 (예 : 크롬)에서 실행될 때 작동하지만 웹앱으로 실행될 때 작동이 중지됩니다 (즉, 홈 화면에 저장되고 크롬없이 실행 됨).

저의 이상적인 해결책은 입력 필드에 값을 삽입하는 것입니다 ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

테두리가 없음으로 설정되어 있음에도 불구하고 iOS는 필드 위에 다중 픽셀 회색 막대를 렌더링하기 때문에 이상적이지 않습니다. 그러나 숫자를 링크로 보는 것보다 낫습니다.

나는 이것을 직접 테스트했으며 그것이 우아한 해결책은 아니지만 작동한다는 것을 알았습니다. 전화 번호에 빈 스팬을 삽입하면 데이터 감지기가 링크를 만들지 못하게됩니다.

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no"> 이메일에서 작동하지 않습니다. 준비중인 HTML이 이메일 용인 경우 메타 태그가 무시됩니다.

타겟팅 대상이 이메일 인 경우 다음과 같은 또 다른 추악한 솔루션이 있습니다.

연결 또는 자동 형식화를 피하려는 일부 HTML의 예 :

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

그리고 마술을 일으키는 CSS :

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

단점 : ipad / iphone portrait / landscape 콤보 각각에 대해 미디어 쿼리가 필요할 수 있습니다.

HTML 엔티티로 인코딩을 시도 할 수 있습니다.

0 = 0
9 = 9

Sencha Touch 앱의 동일한 문제가 앱의 <meta name="format-detection" content="telephone=no">index.html에서 메타 태그 ( )로 해결되었습니다 .

모바일 사파리 이상에서 작동하는 트릭은 HTML 이스케이프 코드와 전화 번호에 약간의 마크 업을 사용하는 것입니다. 이것은 브라우저가 전화 번호를 "식별"하기 어렵게합니다.

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

나도이 문제가 있습니다 : Safari 및 기타 모바일 브라우저는 VAT ID를 전화 번호로 변환합니다. 따라서 전체 페이지 (또는 사이트)가 아닌 단일 요소에서 피할 수있는 깨끗한 방법이 필요합니다.
내가 찾은 가능한 솔루션을 공유하고 있지만 차선책이지만 여전히 실행 가능합니다. tel:링크 안에 포함하고 싶지 않은 ⁠HTML 엔터티 인 Word-Joiner invisible character 입니다. 나는이 문자를 의미있는 자리에 두어 더 의미 적으로 (적어도 적어도 일종의) 머 무르려고 노력했다. 예를 들어 VAT ID 의 경우 형식 에 따라 다른 숫자 그룹 사이에 넣기를 선택했다. 이탈리아 부가가치세 I 위해 이렇게 쓴 : 0613605⁠048⁠8그것은 0613605⁠048⁠8에서 렌더링되며 전화 번호로 변환되지 않습니다.

다른 옵션은 전화 번호의 하이픈을 문자로 바꾸는 것입니다 ‑(U + 2011 'Unicode Non-Breaking Hyphen')

나는 이것에 의해 잠시 동안 정말로 혼란스러워했지만 마침내 알아 냈습니다. 우리는 사이트를 업데이트했고 일부 숫자는 링크로 변환했지만 일부는 그렇지 않았습니다. 숫자가 <fieldset>에있는 경우 링크로 변환되지 않습니다. 대부분의 상황에서 올바른 솔루션은 아니지만 일부 경우에는 올바른 솔루션입니다.

이 답변은 2012 년 6 월 13 일 현재 모든 것을 능가합니다.

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

텍스트와 일치하는 색상으로 텍스트를 변경하면 텍스트 장식으로 밑줄이 제거되고 포인터 이벤트로 인해 브라우저에서 링크처럼 표시되지 않습니다 (포인터가 손으로 변경되지 않음)

이것은 iOS 및 브라우저의 HTML 이메일에 적합합니다.

연결을 제거하고 싶은 이유는 무엇입니까?

자동 편집을 제거하고 싶지만 링크를 계속 작동 시키려면 CSS에 추가하십시오.

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

숫자를 별도의 텍스트 블록으로 나누십시오.

301 <div style="display:inline-block">441</div> 3909

다른 해결책은 IP 번호의 이미지를 사용하는 것입니다