tel链接需严格清洗号码、适配微信限制并提供降级方案:只保留数字、+、#、*,补+86前缀,href中冒号后紧接号码;微信iOS默认拦截,Android需≥8.0.23;须提供复制等fallback,禁用过时meta标签。

tel: 链接在绝大多数移动浏览器中能直接唤起拨号盘,但不是写个 <a href="tel:13800138000"> 就万事大吉——格式错一位、多一个空格、微信里点不动,都可能让功能彻底失效。
号码清洗必须做:只留数字、+、#、*
用户输入的号码常带括号、空格、短横、中文标点,而 tel: 协议只认 ^\+?[0-9\#\*]+$ 这类字符串。iOS 尤其严格,tel:(138) 0013-8000 在 Safari 中大概率静默失败。
- 用正则提取合法字符:
number.replace(/[^+\d#*]/g, '') - 若原始号码含
+86,保留;若只有 11 位纯数字,按需补前缀(国内业务建议统一补+86) - 确保
href值中冒号后**紧接**号码,不能有空格:tel:+8613800138000✅,tel: +8613800138000❌
微信环境要单独处理:iOS 微信默认禁用,Android 需版本 ≥8.0.23
微信是最大“例外现场”:iOS 微信从 7.0.12 起默认拦截 tel:,点击无反应、无报错、无法监听;Android 微信 8.0.23+ 才正式支持,旧版仍可能弹“无法打开”。
- 检测是否在微信内:
navigator.userAgent.includes('MicroMessenger') - 降级方案必须提供:比如显示号码并加「长按复制」提示,或调用
document.execCommand('copy')(注意权限) - 别依赖
touchstart+setTimeout去“猜”是否拨号成功——页面 visibilitychange 不可靠,且 iOS 微信根本不会触发跳转
<meta name="format-detection" content="telephone=yes"> 已过时,慎用
这个 meta 标签曾用于让 iOS Safari 自动识别页面中裸露的数字为可点击号码,但它会把所有 11 位数字(如身份证、订单号)都转成拨号链接,干扰严重。2026 年主流 iOS 版本已基本忽略该设置,且 Android 完全不支持。
- 不要加它,尤其当页面含非电话数字时
- 主动控制比被动识别更可靠:只对明确标记为电话的元素用
<a href="tel:..."> - 若需视觉统一,用 CSS 强制移除 iOS 默认下划线:
a[href^="tel"] { text-decoration: none; color: inherit; }
防误触与反馈不能靠 JS 监听
tel: 是原生协议跳转,不触发 click、beforeunload 等事件,也无法阻止默认行为。所谓“防连点”,只能靠 UI 层压制。
- 加
style="touch-action: manipulation;"减少 iOS 点击延迟 - 点击后立即置灰/禁用按钮(用
pointer-events: none或临时加 class),避免用户连续猛戳 - 别试图用
location.href = 'tel:...'替代<a>—— 多数 Android WebView 会直接忽略,且无法 fallback 到复制逻辑

















