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

StackOverflow https://stackoverflow.com/questions/226131

  •  03-07-2019
  •  | 
  •  

문제

iPhone의 Safari는 전화번호에 나타나는 숫자열에 대한 링크를 자동으로 생성합니다.나는 IP 주소가 포함된 웹페이지를 작성 중이고 Safari는 이를 전화번호 링크로 전환합니다.전체 페이지나 페이지의 요소에 대해 이 동작을 비활성화할 수 있습니까?

도움이 되었습니까?

해결책

이것은 옳은 일인 것 같습니다. 사파리 HTML 참조:

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

이를 비활성화하지만 여전히 전화 링크를 원한다면 여전히 "전화"URI 체계를 사용할 수 있습니다.

여기에 있습니다 관련 페이지 Apple의 개발자 도서관에서.

다른 팁

특정 요소에 대한 전화 구문 분석 모양을 비활성화하려면이 CSS는 다음과 같은 것 같습니다.

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

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

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

이것을 추가하십시오. 나는 그것이 당신이 찾고있는 것이라고 생각합니다.

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

제로 폭 더 결합기를 사용합니다 &zwj;

전화 번호에 어딘가에 넣으면 저에게 효과적입니다. Browserstack에서 테스트 (및 이메일에 대한 리트머스).

WebView를위한 솔루션!

PhoneGap-Phone / 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 ];
}

// ...

원천: 전화기에서 전화 감지를 비활성화합니다.

페이지 일부에서 전화번호 감지를 비활성화하려면 영향을 받는 텍스트를 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">

또한 ...

&#48; = 0
&#57; = 9

... 일했습니다.

그러나 여기에 세 가지 추악한 해킹이 있습니다.

  • "0"을 문자 "O"로 대체
  • "1"숫자를 문자 "l"으로 바꾸는 것
  • 무의미한 범위 삽입 : 예를 들어, 555.5<span>5</span>5.5555

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

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

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

iPad Safari가 전화 번호 링크로 바꾸라고 주장한 ABN (Australian Business Number)이있었습니다. 제안 중 어느 것도 도움이되지 않았습니다. 내 해결책은 숫자 사이에 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">

... 웹 사이트가 Mobile Safari (즉, Chrome)에서 실행될 때 작동하지만 웹 앱으로 실행될 때 작동이 중지됩니다 (즉, 홈 화면에 저장되어 Chrome없이 실행됩니다).

비밀이 아닌 솔루션은 값을 입력 필드에 삽입하는 것입니다 ...

<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 초상화/조경 콤보에 대한 미디어 쿼리가 필요할 수 있습니다.

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

&#48; = 0
&#57; = 9

메타 태그로 해결 된 Sencha Touch 앱에서 동일한 문제 (<meta name="format-detection" content="telephone=no">) index.html in app.

Mobile Safari 이상에서 작동하는 트릭은 HTML 탈출 코드와 전화 번호에 약간의 마크 업을 사용하는 것입니다. 이로 인해 브라우저가 전화 번호를 "식별"하기가 더 어려워집니다.

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

나도이 문제가 있습니다. Safari 및 기타 모바일 브라우저는 VAT ID를 전화 번호로 변환합니다. 따라서 전체 페이지 (또는 사이트)가 아닌 단일 요소에서 피하는 깨끗한 방법을 원합니다.
나는 내가 찾은 가능한 솔루션을 공유하고있다. 그것은 차선책이지만 여전히 꽤 실행 가능하다. 나는 내가하고 싶지 않은 숫자 안에 tel: 링크, &#8288; HTML 엔티티입니다 Word-Joiner Invisible 캐릭터. 나는이 숯을 의미하는 자리에 넣음으로써 더 많은 의미를 유지하려고 노력했다. 형식 그래서 이탈리아 부가가치세를 위해 나는 다음과 같이 썼다. 0613605&#8288;048&#8288;8 0613605⁠048⁠8로 렌더링되며 전화 번호로 변환되지 않습니다.

또 다른 옵션은 캐릭터별로 전화 번호의 하이픈을 교체하는 것입니다. ‑ (U+2011 'Unicode Non-Breaking Hyphen')

나는 이것에 대해 한동안 혼란 스러웠지만 마침내 그것을 알아 냈습니다. 우리는 우리 사이트를 업데이트했으며 링크로 변환하는 숫자가 있었지만 일부는 그렇지 않았습니다. 숫자가 링크가 링크로 변환되지 않는다는 것이 밝혀졌습니다.u003Cfieldset> . 분명히 대부분의 상황에 맞는 솔루션은 아니지만 일부는 올바른 솔루션이 될 것입니다.

이 답변은 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 번호의 이미지를 사용하는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top