前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >web移动端实现打电话和保存到电话簿功能

web移动端实现打电话和保存到电话簿功能

作者头像
1338335202用户
发布2022-12-19 20:23:18
7080
发布2022-12-19 20:23:18
举报
文章被收录于专栏:前端flutter

前言

在web移动端开发中,做产品页面时可能需要一个a标签来链接一个联系方式(电话号/座机号等),也可能会是一个侧边悬浮的电话小图标,无论怎么展示,我们都希望每当用户点击时,直接通过网页输好手机号并引导用户拨打给我们。而不希望输入手机号的工作由用户来完成。

tel直接写入(推荐)

代码语言:javascript
复制
<a href="tel://13191835108"> 
	点击联系我们
</a>

通过tel写入的电话/座机,无论是在安卓/苹果手机浏览器(在QQ浏览器下支持不是很好)都能非常好的渲染出来,需要注意的是,相同的代码在安卓/苹果下显示的结果是不同的,这也是老生常谈的 “兼容性” 问题。

Wtai直接写入

使用Wtai(Wireless Telephony Applications Interface)协议直接写入电话号码。

代码语言:javascript
复制
<a href="wtai://wp/mc;13191835108">
	点击联系我们
</a>

以上代码,通过Wtai协议,也实现了拨打电话。 Wtai协议正在逐渐被支持,大部分浏览器都支持它。

Wtai将号码保存到电话簿

代码语言:javascript
复制
<a href="wtai://wp/ap;13191835108;">
	存储在电话簿
</a>

自动探测可能的电话号码

代码语言:javascript
复制
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

通过自己封装函数,来打造不一样的拨打方法也是不错的,但一定要格外注意浏览器兼容问题。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • tel直接写入(推荐)
  • Wtai直接写入
  • Wtai将号码保存到电话簿
  • 自动探测可能的电话号码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档