h5点击电话号跳转手机拨号

需要使用到h5的 <a>标签

我们首先在<head>标签中添加代码

复制代码
    <meta name="format-detection" content="telephone=yes"/>

然后再想要的位置添加代码

复制代码
 <a href="tel:10086"> 点击拨打:10086 </a>

这样功能就实现了,完整代码如下:

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打电话</title>
<meta name="format-detection" content="telephone=yes"/>
</head>
<body>

 <a href="tel:10086"> 点击拨打:10086 </a>

</body>
</html>

这样最重的样式是这样的

如果你不想要这个下划线,可以在样式中修改,给<a>标签添加一个class属性,如:

复制代码
 <a href="tel:10086" class="phone_point"> 点击拨打:10086 </a>

然后再style中添加样式:

复制代码
.phone_point{
  text-decoration: none;
}

这样就可以了,完整代码如下:

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打电话</title>
<meta name="format-detection" content="telephone=yes"/>
</head>
<body>
<a href="tel:10086" class="phone_point"> 点击拨打:10086 </a>

</body>
<style>
.phone_point{
  text-decoration: none;
}
</style>
</html>

最终效果:

相关推荐
归零鸟14 小时前
手机卡老用户套餐优化方法:如何绕过运营商隐形壁垒
智能手机·信息与通信·电视
jxkejiiii1 天前
电脑键盘震动反馈,开启与关闭方法及常见问题解答
java·安全·智能手机
code_li1 天前
为什么手机没网,身份验证器也能生成验证码
智能手机·密码学
JFSJHFZJ1 天前
后直板机时代:传统智能手机是否将在三年内消亡
智能手机
Liu.7742 天前
HBuilder X真机运行时无法识别手机
智能手机·hbuilder x
feng一样的男子2 天前
住在手机里的“小龙虾” (OpenClaw):接入本地模型,解决记忆“装死”顽疾
android·ai·智能手机·openclaw
wanhengidc2 天前
云手机会导致本地数据被读取吗
运维·服务器·数据库·游戏·智能手机
一品威客网2 天前
智能手机普及催生新机遇:专业 App 开发助力品牌增长破局
智能手机
rpa研究爱好者2 天前
灵梭RPA轻松实现手机自动化操作
智能手机·自动化·rpa
wanhengidc2 天前
选择站群服务器的好处
运维·服务器·网络·安全·智能手机