「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:鏈接，以及通過在移動設備上
它會顯示在任何移動設備上tel:鏈接設置默認display: none和display: inline，他們無論是能夠處理的電話號碼或不。

來源

2013-06-30 13:59:06

非常感謝。請提出我的問題。 –

實際上，如果您在桌面瀏覽器的鏈接上指定'pointer-events：none'，它*會*刪除鏈接行爲。 :-) – Ben

屏幕寬度對於確定設備是否能夠撥打電話不是一個好的試金石測試。此外，媒體查詢很少使用撤消樣式，然後在媒體查詢中重做樣式。只需在反向媒體查詢中撤消它們即可。最終用更少的CSS來做同樣的事情。 – cimmanon

「tel：」導致非移動瀏覽器出現錯誤頁面的URL

回答

相關問題