728x90
퍼블리싱] 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;
}
}
반응형
'지식 확장 > 업무 노트' 카테고리의 다른 글
퍼블리싱] input type password 입력 값 안보일 때 해결법 (feat. 사파리 브라우저 / 나눔스퀘어 웹 폰트) (0) | 2021.09.13 |
---|---|
이클립스] Emmet(에밋) 플러그인 설치 + 단축키 변경 (Cheat Sheet 링크 포함) (0) | 2021.07.02 |
PDF] 텍스트 복사 / 텍스트 추출 안될 때 해결법 (with Google 문서) (0) | 2021.06.06 |
퍼블리싱 ] 유튜브 동영상 반응형 홈페이지에 삽입하기 (화면 너비에 맞게 100%로 만들기) (0) | 2021.05.14 |
파워포인트] 글꼴 변경 안될 때 해결법 (0) | 2021.04.04 |