4

我在其他几篇文章中读到，可以tel:在锚标签中为电话号码创建可点击链接

我想在响应式网站中实现它.. 像这样：

<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>

（我打算用 CSS 隐藏电话的 span 标签）

这个想法是，在桌面上您只会看到“给我们打电话！(555) 555-5555”，而不是实际的链接

但是当我们缩小到移动端时，你会看到一个风格化的链接，上面写着“给我们打电话！” 你可以点击。

我确信有一种方法可以使用 JavaScript 或 JQuery 来实现这一点……但无论如何可以使用 CSS 媒体查询来实现这一点吗？

注意：视觉样式没有问题..只是为“切换”概念寻找合理的解决方案。

提前致谢！

4

4 回答 4

3

将链接留在台式计算机上确实没有任何问题。例如，这将允许您单击链接以通过 Skype 或您可能已安装的其他 VOIP 程序进行呼叫。

如果您仍想更改链接，只需创建其中两个。一个用于台式机，另一个用于移动设备。

于 2013-08-15T19:55:23.280 回答
2

您可以创建 2 个链接，一个显示在桌面上，一个显示在移动设备上

或者

使用 css 将带有电话号码的锚定样式设置为默认光标，这样即使您悬停它也不会看起来像一个链接。为了补充这一点，您需要使用 js 来禁用点击操作。

这一切都假设您可以可靠地检测到您使用的设备。

于 2013-08-15T19:57:33.223 回答
1

我认为您最好的选择是在您的锚标签中添加一个 ID，然后通过您的媒体查询，您可以将其隐藏在桌面版本中，无需跨度。

然后对于您的非锚文本隐藏当您通过媒体查询中的另一个 ID 缩小时。

于 2013-08-15T19:55:42.453 回答
0 
<a href="tel:123456789" class="tel-link">TEL: 123-456-789</a>

@media screen and (min-width: 600px) {
    .tel-link {
        color: #000 !important;
        text-decoration: none !important;
    }
}

这将为超过 600 像素宽的浏览器显示纯黑色的电话号码（因此它看起来不像一个链接），即使它仍然有一个链接。我认为这没关系，因为您现在可以从 PC 拨打电话。

于 2014-11-15T03:35:52.427 回答