如何将电话号码显示为移动设备而不是桌面设备上的链接？答案

【问题标题】：How can I display a phone number as a link on mobile but not desktop?如何将电话号码显示为移动设备而不是桌面设备上的链接？
【发布时间】：2020-11-10 00:03:57
【问题描述】：

我在网站上列出了一个号码，我想在用户使用手机时作为可调用链接，但在桌面上不显示为链接。我可以这样做：a href="tel:5550005555">555-000-5555 /a 用于移动视图，但是在桌面上如何摆脱该标签？感谢您的帮助。

【问题讨论】：

这能回答你的问题吗？ How to disable link to phone number when on Desktop?
你不应该这样做。在所有情况下，您都应该使用tel: 作为电话号码。留给用户代理来为您的用户显示数字。您假设用户不会从他们的桌面拨打电话，而他们中的许多人都会这样做。
另外，请注意“桌面”并不意味着您不能拨打电话。 Mac 上的 Safari 可以使用您的 iPhone 拨打电话。此外，许多 SIP/VoIP 提供商都有浏览器插件，可以通过桌面体验拨打电话号码。
我只是为特定的最大宽度编写媒体查询，然后简单地在该断点上使用命中时不显示任何内容。

标签： javascript html css

【解决方案1】：

我绝对建议您在桌面上也保留可供拨打的电话号码，因为实际上很多人确实会在 RingCentral 或 WhatsApp 等特定应用中使用这些电话号码。

如果您仍然想这样做并且不想在桌面上显示：无，您可以做的是（这不是最佳做法）有 2 个电话号码，一个带有 tel: 一个没有并使用媒体查询以显示。像这样：

<span class="phone-desktop">123-123-1234</span>
<a class="phone-mobile" href="tel:1231231234">123-123-1234</a>

//styles

.phone-mobile{display:none};

@media (max-width: 1440px){ //this will only show desktop
    .phone-desktop{display:none}
    .phone-mobile{display:block}
}

再次重申，最好只对两者都使用 tel: 而不必这样做，因为复制代码不是最佳做法，而且单击您认为是链接的内容也不是用户友好的，但是它什么也不做。但除此之外，这应该可以完成。如果您还需要任何帮助，请告诉我。

【讨论】：

【解决方案2】：

我在互联网上找到了this，通过它您可以检查用户是在移动设备上还是在桌面上查看了您的页面。

<html>
<head>
    <title>Mobile Test</title>
</head>
<body>

    <p id="text"></p>

    <script type="text/javascript">
        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        var element = document.getElementById('text');
        if (isMobile) {
            element.innerHTML = "You are using Mobile";
        } else {
            element.innerHTML = "You are using Desktop";
        }
    </script>
</body>
</html>

【讨论】：

【解决方案3】：

您可以使用 CSS3 @media 功能来指定屏幕大小，并为满足条件的前者赋予特定的 CSS 样式（例如，您可以隐藏元素）

这是来自 W3SCHOOLS 的一个使用示例：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

【讨论】：