手机网页拨号依赖 tel: 协议而非 HTML5，需用 或 window.location.href 触发；须确保真实点击、元素可聚焦、无 JS/CSS 干扰；微信等内嵌浏览器需降级复制提示；号码须为纯数字无分隔符。
手机网页能直接拨号，靠的是 tel: 协议，不是 HTML5 新增的“功能”，更不是某个新属性——它早就存在，且和 HTML5 无关。很多开发者误以为要加 data-* 或用 input type="tel" 才能触发拨号，其实完全不需要。
为什么 拨号 有时不生效
最常见原因是链接被 JavaScript 阻断、CSS 隐藏或点击区域太小。iOS 和 Android 对 tel: 的触发有严格限制：必须是用户真实点击（不能是 click() 模拟）、元素需可聚焦、不能被 pointer-events: none 或 opacity: 0 干扰。
- 确保
标签未被event.preventDefault()拦截 - 避免套在
里再绑 click——这属于“非原生交互”，iOS Safari 会拒绝唤起拨号面板 - Android 微信内置浏览器默认禁用
tel:，需在公众号后台开启「网页拨号」权限（路径：公众号设置 → 功能设置 → 网页功能）
input type="tel" 的作用不是拨号，而是唤起数字键盘
这个类型只影响软键盘布局和基础校验（比如 iOS 不会显示字母键），它本身不会绑定任何拨号行为。想点输入框就拨号？不行。必须配合 或 JS 调用 window.location.href = "tel:..."。
-
只是告诉浏览器“这是电话格式”，别自动纠错成邮箱 - 若想点击输入框就拨号，得额外写 JS：
input.addEventListener('focus', () => { window.location.href = 'tel:' + input.value; });，但注意：部分 Android 浏览器会拦截这种自动跳转 - 别给
input加readonly后又试图监听 focus——iOS 下 readonly input 无法获得焦点，事件根本不会触发
如何安全兼容微信、QQ、钉钉等内嵌浏览器
这些 App 的 WebView 大多阉割了 tel: 协议支持，或需要显式授权。最稳妥的方式是降级提示 + 引导复制：
立即学习“前端免费学习笔记（深入）”；
- 先检测是否在微信中：
ua.includes('MicroMessenger')，再判断navigator.userAgent.indexOf('Miniprogram') === -1排除小程序环境 - 对微信环境，显示按钮文字为「复制号码」，用
navigator.clipboard.writeText('13800138000')写入剪贴板，再 toast 提示“已复制，请打开电话 App 粘贴拨打” - 避免使用
document.execCommand('copy')，它在新版 Chrome 和 iOS Safari 中已被废弃
真正容易被忽略的点是：拨号链接必须是完整、无空格、无分隔符的纯数字（如 tel:+8613800138000 最佳，tel:138-0013-8000 在某些 Android 厂商定制系统里会失败）。协议本身极轻量，但环境碎片化远超预期——别迷信“写了就能拨”，先测真机，再看渠道。
