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

  • 开发
  • 16

需要使用到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>

最终效果：

阅读全部

相关推荐

  2. uniapp点击拨打手机号？

    2024-07-20 15:50:03       29 阅读

  8. 苹果手机iPhone的iOS系统微信公众号自定义菜单无法跳转网页无响应

    2024-07-20 15:50:03       86 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 15:50:03       52 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 15:50:03       54 阅读

  9. 在Django里面运行非项目文件

    2024-07-20 15:50:03       45 阅读

  19. Python语言-面向对象

    2024-07-20 15:50:03       55 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-20 15:50:03       50 阅读

热门阅读

  1. 恒等式结论

    2024-07-20 15:50:03       15 阅读

  3. Https post 请求时绕过证书验证方案

    2024-07-20 15:50:03       20 阅读

  11. 素数极差

    2024-07-20 15:50:03       15 阅读

  14. 数据结构——栈

    2024-07-20 15:50:03       17 阅读

  18. 大模型环境配置，包括多机多卡 conda env export ＞ qwen_environment.yml同步环境

    2024-07-20 15:50:03       16 阅读

  19. 量化交易对短期收益的提升效果

    2024-07-20 15:50:03       17 阅读

  20. ArcGIS Pro SDK （九）几何 9 立方贝塞尔线段

    2024-07-20 15:50:03       15 阅读

  21. glibc: getifaddrs_internal 占用大量cpu

    2024-07-20 15:50:03       13 阅读

  22. 【关于使用swoole的知识点整理】

    2024-07-20 15:50:03       14 阅读

  26. 机器学习-20-基于交互式web应用框架streamlit的基础使用教程

    2024-07-20 15:50:03       19 阅读

  28. 弹框管理类demo

    2024-07-20 15:50:03       17 阅读

  30. 【机器学习】EM算法（Expectation-Maximization算法）详解

    2024-07-20 15:50:03       15 阅读