freezner

[HTML] iOS 사파리에서 전화번호 링크 해제와 수동 설정법

모바일 기기에서 지원되는 사파리에서는 숫자로 이루어진 텍스트는 자동으로 전화번호를 걸 수 있도록 통화 링크를 생성해줍니다. 하지만 이 기능이 의도치 않게 우편번호, 주소 등에 통화 링크가 걸린다는 것이 문제입니다.

자동으로 생성되는 통화 링크를 생성되지 않도록 하려면 아래 메타 태그를 넣어주시면 됩니다.

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

 

그리고 원하는 부분에 통화 링크를 수동으로 설정하고 싶다면 아래와 같이 a 링크를 걸어주시면 됩니다.

<a href="tel:02-123-1234" style="cursor:text;">02-123-1234</a>

tel 형식의 링크는 데스크탑 브라우저에서는 동작하지 않습니다. 다만 a(anchor) 태그이기 때문에 커서가 포인터(링크 커서)로 표시됩니다. 이 부분을 “cursor:text;” css 속성으로 일반 텍스트처럼 커서 효과를 줍니다.

Exit mobile version