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>

最终效果:

相关推荐
Swift社区5 小时前
鸿蒙 PC + 手机 + 平板:一次真正的多端应用实战
智能手机·电脑·harmonyos
西瓜程序猿1 天前
手机端现场收礼如何实时投屏?
测试工具·智能手机·创业创新·记了么·电子礼薄
能喵烧香1 天前
鸿蒙并非“国产版本的iOS”,本质是对标安卓体系的国产开源操作系统
智能手机·系统架构·开源
派勤电子1 天前
工控机在 3C 电子覆膜 / 贴合机器人中的应用与产品选型
智能手机
wanhengidc1 天前
算力服务器的应用场景
运维·服务器·人工智能·安全·web安全·智能手机
科技重器1 天前
以科学标尺重新定义视觉体验! 京东方发布OLED显示通透感核心研究成果,赋能行业首个通透度标准落地,为用户提供至臻显示体验
科技·智能手机·半导体显示
水云桐程序员2 天前
C++可以写手机应用吗
开发语言·c++·智能手机
largecode2 天前
怎么让每个连锁店的分店手机打出去都显示品牌名?申请多号码企业认证业务
百度·智能手机·微信公众平台·facebook·twitter·paddle·新浪微博
酿情师2 天前
2026平航杯倩倩手机逆向包逆向全过程(逆向鸿蒙系统app包)
华为·智能手机·harmonyos·逆向·ctf·re·取证
wanhengidc2 天前
算力服务器的优势都有哪些?
大数据·运维·服务器·网络·人工智能·安全·智能手机