URL-адрес «tel:» приводит к странице ошибок в немобильных браузерах

Question

На сайте this у меня есть ссылка на номер телефона для мобильных устройств в верхнем правом углу, где отображается номер мобильного телефона. На рабочих столах при нажатии этой ссылки Chrome просто игнорирует ссылку, но firefox и Internet explorer перенаправляются на страницу с ошибкой.

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; } 

Как я могу это исправить?

Answer 1

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: ссылки на любом мобильном устройстве, вы независимо от того, что они способны обрабатывать номер телефона или не.