" tel:"网址导致在非移动浏览器上出现错误页面 [英] "tel:" URLs lead to error page on non-mobile browsers

问题描述

在此网站上，我有一个指向手机号码的链接显示手机号码的右上角的设备.在台式机上，当点击此链接时，Chrome只会忽略该链接，但是Firefox和Internet Explorer会重定向到错误页面.

On this site, I have a link to a phone number for mobile devices in the top right corner where the mobile number is displayed. On desktops, when clicking on this link Chrome just ignores the link but firefox and internet explorer redirect to an error page.

HTML:

<a href="tel:[phone]" 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; }

我该如何解决?

推荐答案

This german-language blog shows a neat workaround that'll work with CSS3-capable browsers. First, you make your tel: links look like normal text by default:

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

然后，为他们提供类似链接的样式，但仅在移动设备上:

Then, you give them link-like styling, but on mobile devices only:

@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"位)

• It won't work with ancient desktop browsers (IE7 and such) - you'd have to give each tel: link a specific class for this to work with all browsers (instead of relying on the CSS3 href^="tel" bit)

它不会删除链接行为，只需将其隐藏一下即可.当然，通过默认设置display: none和在移动设备上设置display: inline，您也可以轻松地完全隐藏tel:链接

It won't remove the link behaviour, just hide it a bit. Of course, you can easily completely hide tel: links as well, by setting display: none by default and display: inline on mobile devices

它将在任何移动设备上显示tel:链接，无论它们是否能够处理电话号码.

It will show tel: links on any mobile device, regardless whether they're capable of handling the phone number or not.

这篇关于" tel:"网址导致在非移动浏览器上出现错误页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！