휴대폰에서 웹 페이지의 링크를 클릭할 때 전화 통화를 실행하는 방법
-
05-07-2019 - |
문제
모바일 장치용 웹 페이지를 구축해야 합니다.내가 아직 파악하지 못한 것이 하나 있다:문자 클릭을 통해 어떻게 전화 통화를 할 수 있나요?
다음과 같이 입력할 수 있는 특별한 URL이 있나요? mailto:
이메일에 태그를 지정하시겠습니까?
장치별 솔루션은 선호되지 않습니다.
iPhone은 자동으로 전화번호를 인식하고 이에 대한 링크를 생성한다는 것을 알고 있지만 이미지에도 이 작업을 수행할 수 있다면 좋을 것 같습니다...그리고 대부분의 모바일 장치에도 적용됩니다.
해결책
대부분의 최신 장치는 전화를 지원합니다.계획.그래서 사용 <a href="tel:555-555-5555">555-555-5555</a>
가셔도 좋습니다.
이미지로 사용하고 싶다면, <a>
태그는 <img/>
다음과 같은 다른 일반적인 상황과 마찬가지로 배치됩니다. <a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>
다른 팁
적절한 URL 체계는 전화 : [번호]이므로
<a href="tel:5551234567"><img src="callme.jpg" /></a>
완전성을 위해 여기에 답을 추가하고 싶습니다.
<a href="tel:1234567">Call 123-4567</a>
대부분의 장치에서 잘 작동합니다. 그러나 데스크탑에서 이것은 클릭 할 때 아무것도 수행하지 않는 링크로 나타나므로 CSS를 사용하여 모바일 장치에서만 조건부로 보이도록 고려해야합니다.
또한 Skype (상당히 인기있는)는 기본적으로 다른 구문을 사용하지만 (tel :)을 사용하도록 매개 변수를 사용할 수 있음을 알아야합니다.
<a href="callto:1234567">Call 123-4567</a>
그러나 최신 모바일 브라우저 (Android에서 확실히 알고 있음)에서 tel
구문은 호출 조치를 완료하는 데 사용할 수있는 사용 가능한 응용 프로그램의 팝업을 제공해야합니다.
클릭 가능한 스마트 폰 링크 코드 :
다음 링크를 사용하여 클릭 가능한 전화 링크를 만들 수 있습니다. 아래 코드를 복사하여 웹 페이지에 붙여 넣은 다음 전화 번호로 편집 할 수 있습니다. 이 코드는 모든 휴대 전화에서 작동하지 않지만 iPhone, Droid / Android 및 BlackBerry에서 작동합니다.
<a href="tel:1-847-555-5555">1-847-555-5555</a>
전화 번호 링크는 위에 표시된대로 또는 다음 예제뿐만 아니라 대시와 함께 사용할 수 있습니다.
<a href="tel:18475555555">1-847-555-5555</a>
이 예에서와 같이 "전화 : 18475555555"로 전화 번호가 설정되는 한 링크에서 텍스트를 사용할 수도 있습니다.
<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>
아래는 확인할 수있는 클릭 가능한 전화 하이퍼 링크입니다. 대부분의 비 전화 브라우저 에서이 링크는 "웹 페이지가 표시 될 수 없음"오류를 제공합니다.
노트: iPhone Safari 브라우저는 페이지의 전화 번호를 자동으로 감지 하고이 페이지의 코드를 사용하지 않고 텍스트를 통화 링크로 변환합니다.
WTAI 스마트 폰 링크 코드 : WTAI 또는 "무선 전화 응용 프로그램 인터페이스"링크 코드는 다음과 같습니다. 이 코드는 올바른 휴대 전화 프로토콜로 간주되며 Droid와 같은 스마트 폰에서 작동하지만 iPhone에서 Apple Safari에는 작동하지 않을 수 있으며 위의 코드는 권장됩니다.
<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a>
기본적으로 <a>
가 있는 요소 href
attr은 접두사가 붙은 전화번호를 가리킵니다. tel:
.국가 코드를 지정하는 데 플러스를 사용할 수 있으며 사람이 볼 수 있도록 하이픈을 포함할 수도 있습니다.
MDN 웹 문서
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link
그만큼 HTML
<a>
요소 (또는 앵커 요소)는 href 속성과 함께 다른 웹 페이지, 파일, 동일한 페이지 내의 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 생성합니다.[…]
전화 링크를 제공하는 것은 웹 문서를 보는 사용자와 전화에 연결된 노트북에 도움이 됩니다.
<a href="tel:+491570156">+49 157 0156</a>
IETF 문서
https://tools.ietf.org/html/rfc3966
그만큼
tel
전화번호 URI"tel" URI의 구문은 다음과 같습니다.
telephone-uri
="tel:"
전화 가입자[…]
예
tel:+1-201-555-0123
:이 URI는 미국의 전화 번호를 가리 킵니다.하이픈은 인간을 더 읽기 쉽게 만들기 위해 포함됩니다.국가, 지역번호, 가입자 번호를 구분합니다.
tel:7042;phone-context=example.com
:URI는 컨텍스트 "example.com"내에서 유효한 로컬 전화 번호를 설명합니다.
tel:863-1234;phone-context=+1-914-555
:URI는 특정 전화 접두사 내에서 유효한 로컬 전화 번호를 설명합니다.