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>

最终效果:

相关推荐
largecode2 小时前
企业号码认证可以线上办理吗?支持线上申请,设置来电显示品牌名
java·python·智能手机·微信公众平台·facebook·paddle·新浪微博
号码认证服务3 小时前
客户看到来电显示公司名会更愿意接听吗?企业号码认证提升ROI
服务器·网络·c++·经验分享·智能手机·云计算·php
号码认证服务7 小时前
小米、OPPO、VIVO手机支持号码认证显示公司名吗?
java·服务器·网络·经验分享·智能手机·云计算·php
剑客自媒体1 天前
社保卡照片怎么用手机上传?尺寸和背景色有什么要求?
python·智能手机
wanhengidc1 天前
云手机中虚拟技术的功能
运维·服务器·网络·安全·web安全·智能手机
前端不太难1 天前
一套鸿蒙 App,如何跑在手机 / 平板 / TV?
智能手机·电脑·harmonyos
晶台光耦2 天前
光耦应用 | 晶台光耦在手机充电头里的应用
智能手机
2601_954706492 天前
2026 云手机五款横评:傲晨云、多多云、六边云、川川云、桃心云实测,全能首选无悬念
智能手机
小猫爱游戏2 天前
theone陪伴ai手机版免费版下载安装教程附带最新邀请码theone陪伴ai设定教程接入下载使用教程手机版安卓版app鸿蒙版苹果版IOS电脑版安装包下载地址
android·人工智能·智能手机·theone陪伴ai·theone陪伴ai下载·免费下载安装·接入微信教程
号码认证服务2 天前
企业固话号码认证能覆盖哪些手机品牌?支持华为、小米、OPPO、vivo等机型
服务器·网络·经验分享·python·华为·智能手机·云计算