代码片段 → HTML → iPhone 拨打和短信链接

iPhone 拨打和短信链接

Avatar of Chris Coyier
Chris Coyier 于

这是拨打电话的链接（如果可点击文本是文字，可能更有用，因为 iPhone 会自动检测电话号码并自动执行此操作）

<a href="tel:1-408-555-5555">1-408-555-5555</a>

这是短信链接，它会覆盖默认的拨打电话行为

<a href="sms:1-408-555-1212">New SMS Message</a>

不确定这些链接在其他设备上是否有效……可能有点危险，因为使用不标准的链接会导致错误或无法正常工作，这是一种糟糕的用户体验。最适合仅限移动设备的网站。如果有人知道这是否适用于 Android/Blackberry/其他移动设备，请在下面评论。

嘘！ 创建一个 DigitalOcean 帐户并获得 200 美元的免费额度 用于基于云的托管和服务。

评论

  1. Aaron
    评论永久链接#

    我认为使用“callto:”而不是“tel:”更有用——这些也可以在桌面的 Skype 上使用。

    回复
    • Ucavus
      评论永久链接#

      callto: 是专有的。tel: 是 RFC，适用于许多设备，并且 Skype 可以理解。

  2. Andrej Badin
    评论永久链接#

    应该与某些设备检测脚本结合使用，这将阻止我们在不受支持的设备上使用非标准链接。

    回复
    • Niket Pathak
      评论永久链接#

      作为替代方案，您可以使用元标记在浏览器上禁用自动检测（更多信息）[http://digitalfortress.tech/tricks/creating-direct-click-to-call-sms-links/]

  3. Dinesh Verma
    评论永久链接#

    这是否也适用于 Android。

    回复
    • traq
      评论永久链接#

      如果您长按电话号码，Android 将显示一个拨号菜单。但是，我认为您需要一个专用应用程序才能实际拨打电话，至少在我尝试在 2.2 平板电脑上使用时是这样的。

    • priya
      评论永久链接#

      是的，“tel”标签适用于 Android 手机。

  4. Josh
    评论永久链接#

    是的，我可以确认它适用于 Android，但有一个例外，它不会自动拨打电话，您需要自己点击拨打……所以它所做的就是在尝试拨打电话时显示号码，但发送短信会打开一条新消息。

    回复
  5. russ
    评论永久链接#

    嗨，团队，
    偶然回到这个帖子，想到邮件签名。

    当从电子邮件签名（在本例中为 Mac 邮件）中点击时，我们可以通过哪些方法优化电话号码使其与各种设备/界面/客户端配合使用？

    例如，我是卡尔加里的 Joe 收件人，收到来自布宜诺斯艾利斯（是的）同事的电子邮件——Skype 恰好是我现在首选的联系方式……有没有办法让我在点击手机或桌面上电话号码时，可以在“电话”、“短信”、“Skype”之间进行选择？
    当然会很棒——但这是否太理想化的疑问？

    回复
  6. Mike Swizzy
    评论永久链接#

    参考 IETF 标准 RFC3966 [ http://tools.ietf.org/html/rfc3966 ]。我已经验证过这在大多数移动设备上都能正常工作……点击（轻触）链接，您将直接进入拨号器，并自动填充电话号码。在标题中包含 *meta name="format-detection" content="telephone=no"* 以强制在所有设备上使用此格式。

    回复
  7. David Do
    评论永久链接#

    这对我来说是新的，但让我试试

    回复
  8. Enrique
    评论永久链接#

    您知道如何在电话号码包含“井号”# 时使此功能正常工作吗？我不了解其他国家/地区，但在西班牙，这在激活或停用漫游等服务的功能中非常常见。我已经尝试使用 HTML 实体将其编码为 #，但手机仍然无法识别。它们似乎只是链接到没有 # 部分的电话号码……

    回复
    • James
      评论永久链接#

      是的，Enrique，将 # 替换为两个零……在电话上也能正常工作。
      而不是
      “+ 40 012345678” 你使用
      “00 40 012345678”

    • 某人
      评论永久链接#

      # 必须使用 URL 编码为 %23。

    • Gero
      评论永久链接#

      Hola Enrique，你解决井号(#)问题了吗？

      在我的 Android 设备上，使用 %23 可以正常工作，但在 Apple 设备上无法拨打电话。

  9. Chase
    评论永久链接#

    我刚刚在我的客户的移动网站上使用了此技术。效果非常好。谢谢！！！

    回复
  10. Laura
    评论永久链接#

    感谢这个很棒的提示！我刚刚在一个网站上使用了它，非常简单——一旦有人这么好心教你如何操作！: )

    回复
  11. Andrew
    评论永久链接#

    我敢肯定，如果您也实现了微格式结构，就会获得这些链接。

    回复
  12. Jenna
    评论永久链接#

    如何设置它，而不是只呼叫一个人，如何让它转到 iPhone 的未接来电和联系人等？

    回复
  13. Marc
    评论永久链接#

    使用“tel”会导致桌面 Mac 上出现 404 错误。“callto”可以正常工作。
    另一个被吹捧为更好的来源包含了 jQuery 的使用，尽管我还没有尝试过。
    http://zekefranco.me/mobile/ios/phone-number-conversion-for-mobile-devices/

    回复
  14. Carlton Stith
    评论永久链接#

    我正在重新设计我的网站，我将此用于我的联系部分。谢谢！

    回复
  15. Vic Dinovici
    评论永久链接#

    我试图在电子邮件中的图像中添加一个呼叫链接。我尝试了 tel: 和 callto:，使用电话号码，不带“-”，也带“-”。它就是不起作用。当我在浏览器中打开电子邮件并点击文本号码时，它可以正常工作。您知道还有什么可以尝试的吗？

    回复
  16. Marc
    评论永久链接#

    以下是我成功使用此方法的笔记。我通常为我的电子邮件创建两个 html 文件。一个用于发送，另一个用于如果收件人无法查看电子邮件中的图像则可以访问的页面。我发现的不同之处在于电子邮件的处理方式与 Safari 不同。

    希望对您有所帮助。

    对于电子邮件，将电话图像上的链接设置为

    tel://1-###-###-####

    但对于桌面或移动浏览器，将链接设置为
    callto:1-###-###-####

    在桌面上，点击将启动 Skype（如果可用）。

    在浏览器内的移动设备上，点击将启动电话呼叫。

    回复
  17. octavioamu
    评论永久链接#

    那么文本中的大数字呢？如果您在 iPhone 中有“关于某事的某些文本 000000000”，则此00000000会自动变成呼叫链接……

    回复
  18. adam
    评论永久链接#

    对于链接到短信，是否有人知道是否可以预先填充短信正文字段？

    回复
  19. Himu
    评论永久链接#

    嗨

    如果我想添加一个在呼叫连接时拨打的额外代码呢？这可以自动化吗？

    回复
  20. anil
    评论永久链接#

    显示 W3c 错误……

    回复
  21. Gregg

    评论永久链接#

    对于那些一直在问的人，“tel”链接在Android上确实有效。“callto”链接无效。这是根据我的运行Jelly Bean的Samsung Note II得出的。

    回复
  22. Kumar
    评论永久链接#

    如果您不想启动后端，则用于设置短信链接文本表单的一个非常有效的方法是Link Texting。

    我们构建它是为了让这个问题成为过去。

    回复
  23. Farhan Islam
    评论永久链接#

    这篇文章包含大量有用的信息。

    我试图添加标签，但忘记了要使用的确切拼写。

    短信提示也很棒 ^_^

    回复
  24. Jesse
    评论永久链接#

    我们使用http://notifynotify.com来捕获电子邮件并将其存储在数据库中。它们有一个非常简单的编辑器，甚至还有一个即时可用的重复提醒调度程序。

    回复
  25. Yves
    评论永久链接#

    与Himu相同的问题。是否有一种方法可以在建立呼叫后插入DTMF？例如，我想联系555-555-5555，当被叫方接听时，我希望系统自动按下#然后2#等等…

    回复
  26. Paul D
    评论永久链接#

    对于任何想要简单地切换电话号码显示方式（移动设备与非移动设备）的人

    HTML

    <a class="phone-mobile" href="tel:1-800-555-1212">+1 (800) 555-1212</a>
<span class="phone-nonmobile">+1 (800) 555-1212</span>

    CSS

    /* Change behaviour of footer phone link on MOBILE */
@media screen and (max-width: 750px) {
    .phone-mobile {
        display: inline;
    }
    .phone-nonmobile {
        display: none;
    }
}
/* Change behaviour of footer phone link on NON-MOBILE */
@media screen and (min-width: 750px) {
    .phone-mobile {
        display: none;
    }
    .phone-nonmobile {
        display: inline;
    }
}

    使用适合您特定项目的任何设备尺寸！

    -享受

    回复
  27. JonW
    评论永久链接#

    是否有一种方法可以创建一个不仅拨打号码然后拨打分机号码的链接？从本质上讲，它必须拨打，暂停一段时间，然后拨打另一组号码。
    我知道在拨号上网的黑暗时代，您可以通过在两组号码之间插入逗号来做到这一点，但不确定它是否适用于html。

    回复
  28. Aaron Hall
    评论永久链接#

    此页面https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/sms.html#//apple_ref/doc/uid/TP40008054-SW1的“参考URL”不再有效。还有其他页面吗？谢谢。

    回复
  29. Ben
    评论永久链接#

    如何使用itextsharp和razorpdf将此标签添加到PDF中？我需要控制器语法和Razor HTML标记语法。

    回复
  30. Ari
    评论永久链接#

    您好，是否可以在同一个href中添加两个电话号码？

    回复
  31. Olly
    评论永久链接#

    嘿，伙计们，我在为网站电话点击拨打电话链接获取HTML代码时遇到了一些麻烦——它可以工作，但只有在你点击并按住时才有效。我怎样才能让它只需快速点击一下（而不是点击并按住）就可以工作呢？ （就像其他所有链接一样！）

    回复
  32. besnoid
    评论永久链接#

    有没有人能够在iOS 10中使其正常工作？似乎已损坏。有人能让它工作吗？

    回复
  33. Brian Forrest
    评论永久链接#

    我刚刚将SMS代码片段添加到我的新WordPress网站，它运行完美！！谢谢！！

    http://forgeryexpertusa.com/minamaze

    回复
  34. Mark
    评论永久链接#

    今天我尝试使用我的智能手机（索尼Xperia Z1（Android））在一个属于网站托管服务的网站上点击了一个“Tel”链接。

    该链接将数字和字母组合为“1-877-SHAWBIZ”。

    我点击了tel链接，它起作用了，我的手机将字母转换为数字并拨打了电话。

    这种字母代替数字的风格适用于人们通常使用移动设备访问的网站，但对于由于其功能而更多地“桌面访问”的网站（例如托管服务），当有人想要拨打他们的支持热线时，这是一个非常糟糕的想法。

    当我将鼠标悬停（桌面）在数字+字母TEL链接上时，我在浏览器底部状态栏中获得相同的组合。

    我建议那些使用此数字+字母组合的人，将HTML“链接”本身设置为所有数字，并将可见文本设置为数字+组合。这样，您可以为移动用户和桌面用户创建更好的可访问性/可见性。

    基本上，HTML链接本身应该始终是数字，因为这提供了一个回退，并且仅在鼠标悬停时将字母转换为数字。

    还要始终为链接使用“title=”属性。出于同样的原因，并且仅在“title”值中使用数字。上面的链接示例没有“title”属性，它是一个大型公司，使用了熟练的网页设计师。

    回复
  35. Mike
    评论永久链接#

    有人在上面询问如何在主号码之后添加分机号码。只需在您的电话号码末尾添加,,,,xxx，其中xxx是分机号码。四个逗号可以让电话有时间响铃并接听，或者如果使用了自动交换机。

    回复
  36. BarbD
    评论永久链接#

    好的，伙计们。为了继续讨论（我还没有看到任何人问过这个问题），我在尝试将代码添加到我的网站上同一个电话号码的拨打电话和发短信功能时遇到了麻烦。场景是：我希望人们能够通过我的网站上的一个链接或电话号码拨打我的电话或发短信给我。任何可以帮助我了解该协议的人吗？应该很简单。但生活中所有事情都应该比现在更简单。

    回复
  37. vandi
    评论永久链接#

    如果使用tel，如何为此语句进行范围样式设置？

    a[href^="tel:"] {
  text-decoration: none;
  padding: 0 5px;
  cursor: none;
}
    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.