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

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

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

 

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

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

찐빵

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

You may also like...

%d 블로거가 이것을 좋아합니다: