"tel :"모바일이 아닌 브라우저에서 URL이 잘못 표시됨

this 사이트에는 모바일 번호가 표시된 오른쪽 위 모서리에 모바일 장치 용 전화 번호 링크가 있습니다. 데스크톱에서이 링크를 클릭하면 Chrome은 링크를 무시하지만 Firefox와 Internet Explorer는 오류 페이지로 리디렉션됩니다."tel :"모바일이 아닌 브라우저에서 URL이 잘못 표시됨

HTML :

<a href="tel:+491796737741" class="contact-info" ></a>

CSS :

나는이 문제를 해결할 수있는 방법

#header .contact-info { width: 293px; height: 133px; display: block; float: right; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; margin-right: 20px; margin-top: 110px; }

출처

2013-06-30 Daniel Hernandez

This german-language blog은 CSS3 가능 브라우저에서 사용할 수있는 적절한 해결 방법을 보여줍니다. 첫째, 당신이 당신의 tel: 링크는 기본적으로 일반 텍스트처럼 보이게 : 다음

a[href^="tel"]:link, 
a[href^="tel"]:visited, 
a[href^="tel"]:hover { 
    text-decoration: none; 
    color: #000; 
}

, 당신은 그들에게 링크와 같은 스타일을 제공하지만, 휴대 기기에만 :

@media only screen and (max-device-width: 480px) { 
    a[href^="tel"]:link, 
    a[href^="tel"]:visited, 
    a[href^="tel"]:hover { 
     text-decoration: underline; 
     color: blue; 
    } 
}

이 몇 가지주의 사항이 있습니다

그것은 고대의 데스크탑 브라우저 (IE7 등) 작동하지 않습니다 - 당신은 각 tel: 링크이 함께 작업 할 class 특정을 제공해야 할 것이다 그것은 링크 동작을 제거하지 것

(대신 CSS3 href^="tel" 비트에 의존하는) 모든 브라우저, 그냥 조금 숨 깁니다. 물론, 당신은 쉽게 완전히 그들이 전화 번호를 처리 할 수있어 여부에 관계없이, 그것은 모든 모바일 장치에서 tel: 링크를 표시합니다

모바일 기기
에 기본적으로 display: none 및 display: inline을 설정하여,뿐만 아니라 tel: 링크를 숨길 수 있습니다 또는 아니.

출처

2013-06-30 13:59:06

대단히 감사합니다. 내 질문을 upvote하십시오. –

실제로, 데스크탑 브라우저의 링크에'pointer-events : none'을 지정하면 링크 동작이 제거됩니다. :-) – Ben

화면 너비는 장치가 전화를 걸 수 있는지 판단하기위한 좋은 리트머스 테스트가 아닙니다. 또한 스타일을 실행 취소 한 다음 미디어 쿼리의 스타일을 다시 실행하는 것은 미디어 쿼리의 사용 빈도가 낮습니다. 역방향 미디어 쿼리 내부에서이를 취소하십시오. 결국 똑같은 일을하는 CSS가 줄어들게됩니다. – cimmanon

"tel :"모바일이 아닌 브라우저에서 URL이 잘못 표시됨

답변

관련 문제