javascript 如何使 <a href> 仅在移动设备上处于活动状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13409089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an <a href> only active on mobile devices?
提问by Dom
I want to add this code to make the contact details on my website automatically jump into a mobile dialpad/address book when clicked:
我想添加此代码以使我网站上的联系方式在单击时自动跳转到移动拨号盘/地址簿中：
<a href="tel:12345555555">Call Us Now</a>
How can I make it appear as plain text for non-telephone devices (computers, tablets, laptops) so that it doesn't return a 404 error and cannot be clicked?
如何使它在非电话设备（计算机、平板电脑、笔记本电脑）上显示为纯文本，以便它不会返回 404 错误并且无法单击？
Happy to use any combination of HTML/CSS/JS to achieve this.
很高兴使用 HTML/CSS/JS 的任何组合来实现这一点。
回答by John Conde
回答by josh3736
This might not directly answer the question, but I'd challenge your assumption that you need to hide call links on other devices.
这可能不会直接回答问题，但我会质疑您需要隐藏其他设备上的呼叫链接的假设。
Why?
为什么？
- Non-phone devices can still make calls. For example, a PC with a VoIP client can handle
tel:links. - Tablets (iPad and Android) handle
tel:links by allowing the user to add the number to their contacts, which would undoubtedly be synced to their phone – a nice convenience for your users. - Relying on automatic format detection is a hack.
- 非电话设备仍然可以拨打电话。例如，带有 VoIP 客户端的 PC 可以处理
tel:链接。 - 平板电脑（iPad 和 Android）
tel:通过允许用户将号码添加到他们的联系人中来处理链接，这无疑会同步到他们的手机——这对您的用户来说是一个很好的便利。 - 依靠自动格式检测是一种技巧。
So just leave it as a regular link. Maybe make it obvious by linking the phone number, so that someone on a desktop with no telephony software will understand that nothing will happen when they click it.
因此，只需将其作为常规链接即可。也许可以通过链接电话号码使其显而易见，以便没有电话软件的台式机上的人知道单击它时不会发生任何事情。
Call Us Now at <a href="tel:12345555555">(234) 555-5555</a>
Also, remember that a tel:link won't result in a 404 error since a HTTP request is never generated. On my machine with no tel:handler, Chrome simply does nothing, IE9 says "Some content or files on this webpage require a program that you don't have installed." (reasonable), and Firefox says "Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program." (also reasonable).
另外，请记住，tel:链接不会导致 404 错误，因为从未生成 HTTP 请求。在我没有tel:处理程序的机器上，Chrome 什么也不做，IE9 说“此网页上的某些内容或文件需要您尚未安装的程序。”（合理），而 Firefox 说“ Firefox 不知道如何打开这个地址，因为协议（tel）不与任何程序相关联。”（也是合理的）。
When I was faced with this problem, I decided that the benefits of just leaving in tel:links outweighed any downsides or messy alternatives.
当我面临这个问题时，我决定只留下tel:链接的好处超过任何缺点或凌乱的替代方案。
回答by Marcio Mazzucato
I am using the below CSS with Media Queriesto reach this.
我使用下面的 CSS 和媒体查询来达到这个目的。
@media screen and (min-width: 768px) {
a[href*="tel:"] {
cursor:default;
}
}
It is based on this question
它基于这个问题
回答by SergeantHacker
I had the same problem and started using the meta tag for format detection:
我遇到了同样的问题并开始使用元标记进行格式检测：
<meta name="format-detection" content="telephone=no" />
per this discussion with the same problem: Disable telephone number detection on iPad desktop web links?
根据与相同问题的讨论： 禁用 iPad 桌面网络链接上的电话号码检测？
