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

Question

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

Answer 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: 两者，而不必这样做，因为复制代码不是最佳实践，而且单击您认为是链接的东西也不友好，但它什么也不做. 但除此之外，这应该可以完成。 如果您还需要任何帮助，请告诉我。

Answer 2

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

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

Answer 3

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

这是 W3SCHOOLS 的一个使用示例：

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

如需更多信息，请查看以下内容：

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

问题描述

3 个解决方案

解决方案1
2 2020-07-20 17:35:06

解决方案2
0 2020-07-20 17:13:33

解决方案3
0 2020-07-20 17:21:01

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

问题描述

3 个解决方案

解决方案1 2 2020-07-20 17:35:06

解决方案2 0 2020-07-20 17:13:33

解决方案3 0 2020-07-20 17:21:01

解决方案1
2 2020-07-20 17:35:06

解决方案2
0 2020-07-20 17:13:33

解决方案3
0 2020-07-20 17:21:01