“切换”电话：打开和关闭链接...最好仅使用 CSS答案

【问题标题】：'Switching' a Tel: link on and off... Preferably CSS only“切换”电话：打开和关闭链接...最好仅使用 CSS
【发布时间】：2013-08-18 02:38:39
【问题描述】：

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

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

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

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

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

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

我确信有一种方法可以使用 JavaScript 或 JQuery 来完成此操作...但是无论如何可以使用 CSS 媒体查询来完成此操作？

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

提前致谢！

【问题讨论】：

css 用于更改 dom 节点的内容（尤其是 href 的目标）的功能非常有限。你会想要一些 javascript 来处理移动端与移动端的对比。桌面检测并基于此换出网址。 CSS 中的一个技巧是拥有两个 <a> 并根据您所处的环境显示/隐藏每个。
无法使用 CSS 可靠地区分手机和任何其他类型的设备。媒体查询只会告诉您有关显示器的具体信息（尺寸、颜色深度等），而不是设备是否能够拨打电话。尺寸不是检测手机的可靠方法，因为如今许多手机的分辨率都相当大。
其他人已经回答了您的确切问题，但我不确定这是一个好主意。一方面，在台式机上，Skype 和 Lync 都可以直接从浏览器呼叫号码。在移动设备上，隐藏号码意味着用户无法 - 例如 - 将号码读出给朋友。

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

或

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

<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 拨打电话。

【讨论】：