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>

最终效果:

相关推荐
.m13 小时前
安卓手机怎样开启双WiFi加速
智能手机
honey ball1 天前
手机中的type-C是如何防水的呢?
智能手机
菜鸟的发展历程2 天前
华为手机或平板与电脑实现文件共享
智能手机
yangshuo12812 天前
adb|scrcpy的安装和配置方法|手机投屏电脑|手机声音投电脑|adb连接模拟器或手机
adb·智能手机
开心呆哥2 天前
[特殊字符] 手机连接车机热点并使用 `iperf3` 测试网络性能
网络·智能手机
老六ip加速器3 天前
手机静态ip地址怎么获取?方法与解析‌
tcp/ip·智能手机·智能路由器
lilili啊啊啊3 天前
怎么查看苹果手机和ipad的设备信息和ios udid
ios·智能手机·ipad
无级程序员4 天前
移动神器RAX3000M路由器变身家庭云之七:增加打印服务,电脑手机无线打印
智能手机·智能路由器·电脑
开开心心就好4 天前
手机不同App音量自动调节软件
网络·windows·python·安全·智能手机·电脑·音视频
yangshuo12815 天前
实战代码:esp32-cam按钮控制手机拍照V1.0
网络·智能手机