devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

h5点击电话号跳转手机拨号_android h5页面跳转手机拨号

作者：正经夜光杯 | 2024-07-25 13:59:29

赞

踩

android h5页面跳转手机拨号

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

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

    <meta name="format-detection" content="telephone=yes"/>

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

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

这样功能就实现了，完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>打电话</title>
  6. <meta name="format-detection" content="telephone=yes"/>
  7. </head>
  8. <body>
  9.  
  10.  <a href="tel:10086"> 点击拨打：10086 </a>
  11.  
  12. </body>
  13. </html>

这样最重的样式是这样的

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

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

然后再style中添加样式：

  1. .phone_point{
  2.   text-decoration: none;
  3. }

这样就可以了，完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>打电话</title>
  6. <meta name="format-detection" content="telephone=yes"/>
  7. </head>
  8. <body>
  9. <a href="tel:10086" class="phone_point"> 点击拨打：10086 </a>
  10.  
  11. </body>
  12. <style>
  13. .phone_point{
  14.   text-decoration: none;
  15. }
  16. </style>
  17. </html>

最终效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/880552
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号