it-source

모바일 사파리에서 전화 번호 연결을 비활성화하는 방법은 무엇입니까?

criticalcode 2023. 5. 31. 16:02
반응형

모바일 사파리에서 전화 번호 연결을 비활성화하는 방법은 무엇입니까?

iPhone의 Safari는 전화 번호에 나타나는 숫자 문자열에 대한 링크를 자동으로 만듭니다.저는 IP 주소가 포함된 웹 페이지를 작성하고 있으며, Safari는 그것을 전화 번호 링크로 바꾸고 있습니다.전체 페이지 또는 페이지의 요소에 대해 이 동작을 비활성화할 수 있습니까?

Safari HTML Reference에 따르면 이 작업이 올바른 작업인 것 같습니다.

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

이 기능을 사용하지 않도록 설정했지만 여전히 전화 연결을 원하는 경우 "전화" URI 방식을 사용할 수 있습니다.

애플 개발자 라이브러리의 관련 페이지입니다.

사용합니다.&zwj;

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

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

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

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

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

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

저도 같은 문제를 겪고 있었습니다.UI WebView에서 데이터 디텍터를 끌 수 있는 속성을 찾았습니다.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

웹 뷰를 위한 솔루션!

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

// ...

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

페이지 일부에서 전화 번호 탐지를 사용하지 않으려면 영향을 받는 텍스트를 href="#"로 고정 태그로 묶습니다.이렇게 하면 모바일 Safari와 UI WebView는 그대로 두어야 합니다.

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

은 또한 있다니습수도를 할 수 .<a>에 라을붙다를 붙입니다.javascript: void(0)~하듯이href 가치.

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

을 찾았다고 합니다: 를 해책을찾것같 안에 . 번호를 안에 넣으십시오.<label>ㅠㅠㅠ ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ<div>홈 스크린에 활성화된 상태로 두었습니다.telephone=no기여하다.

메타 태그가 작동했다는 것은 이전의 언급에서 명백해 보이지만, 어떤 이유에서인지 iOS의 이후 버전에서는 적어도 일부 조건에서는 고장이 났습니다.4.0.1을 실행하고 있습니다.

제 경험은 다른 사람들이 언급한 것과 같습니다.메타 태그는...

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

...웹 사이트가 Mobile Safari(즉, Chrome)에서 실행 중일 때는 작동하지만 웹 앱으로 실행될 때는 작동하지 않습니다(즉, 홈 스크린에 저장되고 Chrome 없이 실행됨).

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

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

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

저는 ABN(Australian Business Number)을 가지고 있었는데, 이 ABN은 iPad Safari가 전화번호 링크로 만들자고 주장했습니다.어떤 제안도 도움이 되지 않았습니다.제 해결책은 숫자 사이에 img 태그를 넣는 것이었습니다.

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

클래스는 img 태그의 용도를 문서화하기 위해 존재합니다.

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

제가 직접 테스트해 본 결과, 우아한 솔루션은 아니지만 효과가 있다는 것을 알게 되었습니다.전화 번호에 빈 범위를 삽입하면 데이터 탐지기가 전화 번호를 링크로 전환할 수 없습니다.

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

저도 같은 문제가 있었지만, 아이패드 웹 앱에서.

불행히도, 둘 다...

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

아니...

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

...일했다.

하지만 여기 세 개의 추악한 해킹이 있습니다.

  • 숫자 "0"을 문자 "O"로 바꾸기
  • 숫자 "1"을 문자 "l"로 바꾸기
  • 다음과 같이 의미 없는 범위를 삽입합니다. 예:555.5<span>5</span>5.5555

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

클루지는 해킹을 합니다. 데이터에서 동적으로 코드를 생성하거나 이런 방식으로 데이터를 오염시킬 수 없다면 실행 가능하지 않을 수도 있습니다.

하지만, 위기일 때는 충분합니다.

제가 Mobile Safari 이상으로 작동하는 비결은 HTML 이스케이프 코드와 전화 번호에 약간의 마크업을 사용하는 것입니다.이로 인해 브라우저가 전화 번호를 "식별"하는 것이 더 어려워집니다.

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

<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

했습니다.<meta name="format-detection" content="telephone=no">) in index.sublished of app.

이 답변은 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;
}

저도 이런 문제가 있습니다.Safari 및 기타 모바일 브라우저는 VAT ID를 전화 번호로 변환합니다.그래서 저는 전체 페이지(또는 사이트)가 아닌 하나의 요소에서 그것을 피할 수 있는 깨끗한 방법을 원합니다.
저는 제가 찾은 가능한 해결책을 공유하고 있습니다. 그것은 차선이지만 여전히 꽤 실행 가능합니다.나는, 내가 되고 싶지 않은 숫자 안에 넣었습니다.tel:링크,&#8288;Word-Joiner 보이지 않는 문자인 HTML 엔티티입니다.저는 이 문자를 어떤 의미 위치에 넣음으로써 (적어도 일종의) 의미론적인 의미를 유지하려고 했습니다. 예를 들어, VAT ID의 경우 형식에 따라 다른 숫자 그룹 사이에 넣기로 선택했기 때문에 이탈리아 VAT의 경우 다음과 같이 썼습니다.0613605&#8288;048&#8288;806136050488에서 렌더링되며 전화 번호로 변환되지 않습니다.

다른 옵션은 전화 번호의 하이픈을 문자로 바꾸는 것입니다.(U+2011 '유니코드 비차단 하이픈')

나는 한동안 이것 때문에 정말 혼란스러웠지만 마침내 그것을 알아냈습니다.우리는 우리의 사이트에 업데이트를 했고 일부 번호는 링크로 변환되었지만 일부는 그렇지 않았습니다.숫자가 <필드 세트>에 있으면 링크로 변환되지 않는 것으로 나타났습니다.대부분의 상황에서는 분명히 올바른 해결책이 아니지만, 일부 상황에서는 올바른 해결책이 될 것입니다.

WKWebView의 경우 없음에 해당하는 Swift는 다음과 같습니다.

wkWebView.configuration.dataDetectorTypes  = []

숫자를 별도의 텍스트 블록으로 구분

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

메타 태그를 추가하여 포맷 탐지를 해제하는 것은 나에게 효과가 없었습니다.확대/축소 회의 ID를 표시하려고 했습니다.<p>다른 텍스트와 함께 태그하고 iOS는 그 ID를 텔 링크로 바꾸고 있었습니다.추가적으로, 저는 전화 링크를 목표로 했습니다.a[href^="tel:"]사용자 지정 스타일을 제공하기 위해 텔 링크에서 스타일을 비활성화하는 것은 옵션이 아닙니다.

를 가제찾해은책결다니것습포 ID로 포장하는 것이었습니다.<code>태그. 이것은 iOS가 그것을 가지고 장난치는 것을 방지하는 것처럼 보입니다.

언급URL : https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari

반응형