퍼블리싱] PC에서 <a href='tel: 링크 막기

퍼블리싱] PC에서 tel 링크 막기

모바일에서 전화 걸기

모바일에서 전화번호를 터치 시 전화 걸기 화면으로 이동되게 하려면 HTML 마크업을 아래와 같이 작성해야 한다. 

<a href='tel:010-1234-5678'>010-1234-5678</a>

 

PC에서 전화 걸기 기능 제거하기

그런데, pc에서는 해당 기능이 동작하지 않도록 하고 싶어서 찾아보니 아래와 같은 스크립트로 해결할 수 있었다. 
브라우저가 768px 이상일 경우에 href:tel로 시작되는 요소를 찾아 href 속성을 제거하는 내용이다. 

javascript 작성 예시

var telLinks

	if (window.outerWidth > 768) {
	  telLinks= document.querySelectorAll('[href^="tel:"]')

	  Array.from(telLinks).forEach(function (link) {
	    link.removeAttribute('href')
	  })
	}

 

jQuery 작성 예시

if(window.outerWidth > 768) {
  $("a[href^=tel").each(function(e){
	$(this).removeAttr('href');
  });
}

 

PC에서 링크 자체 숨기기

아예 전화번호 자체를 숨기고 싶을 때는 css의 미디어 쿼리를 사용해서 숨김 처리가 가능하지만, 이건 내가 원하는 바가 아니었다.

@media screen and (min-width: 768px) {
  a[href^='tel:'] {
    display: none;
  }
}