首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

href = tel:555链接无法在移动Safari中使用

这个问题涉及到了移动Safari浏览器中的电话链接问题。在移动Safari浏览器中,使用href="tel:555"这样的链接无法正常工作,因为移动Safari浏览器不支持这种链接格式。

为了解决这个问题,可以使用JavaScript代码来实现拨号功能。具体的实现方法如下:

代码语言:javascript
复制
function callPhoneNumber(phoneNumber) {
  if (typeof window.PhoneDialer !== 'undefined') {
    window.PhoneDialer.dial(phoneNumber);
  } else {
    window.location.href = 'tel:' + phoneNumber;
  }
}

在HTML中,可以使用以下代码来调用这个函数:

代码语言:html<button onclick="callPhoneNumber('555')">拨打电话</button>
复制

这样,当用户点击按钮时,就会尝试拨打电话号码555。如果用户使用的是移动Safari浏览器,则会使用JavaScript代码来实现拨号功能,否则会使用tel:链接来拨打电话。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动设备网页打电话、发短信、发邮件的html5链接实现方法

移动浏览器实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)协议提供的接口是一个好办法。...采用url href链接的方式,实现在Safari ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能。 1....拨打电话 电话号码前面可以加上 + (加号)表示国际号码(例如中国:+86)。...如: 最常用WEB页面tel协议实现拨号功能 例子: 使用tel协议: 10086 使用wtai协议进行拨打电话: <a href=”wtai://wp/...Android Market 如果希望一个链接能够激活Android市场的功能,可以把链接写成: <a href=”market://search?

4.8K20

移动Web 开发的一些前端知识收集汇总

开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。...要说移动Web 开发与传统的PC 端开发,感觉也没什么不同,但得益于苹果对于智能机的推动,CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。..." href="Images/setupImg5.png" /> 你可以查看《将你的网站打造成一个iOS Web App》、《iOS / Android 移动设备的 Touch Icons》这两篇文章了解更多...关闭iOS中键盘自动大写、自动更正、自动完成 iOS,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了...body=sms txt"> 发送短信附带内容 的链接 Call us at 18888886666 拨打电话的链接 移除 iOS

3.8K50
  • 趣谈 iOS Universal Link

    当然浏览器(也可以理解为是 App) web 页面也可以通过 scheme:// 跳转到 App,但是这种方式每次跳转的时候都会弹框询问,如果设备没有安装此 App 则会直接弹出错误提示,体验不友好...举例来说, Safari 浏览器看到某个网页上的电话号码,能不能直接调起拨打电话?...我们知道可以这样编码: HTML link: 1-408-555-5555 Native app URL string: tel:1-...未安装你的应用程序时,打开链接Safari 打开显示你网站的内容,是符合用户预期的体验,同时,网页可以显示跳转 AppStore 下载的引导,进一步的提升用户体验。...具体来说,就是设置的 Developer 下 Associated Domains Development,然后 Xcode 配置 associated-domains Universal Link

    2.3K21

    移动端web开发入门笔记

    移动端web app开发 简单来说就是开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。...由于本身没有深入移动端开发,但也可以预见一些移动端开发会碰到的问题: css与js跨平台的问题 h5及诸多新特性的使用 响应式布局及屏幕分辨率问题 native交互的使用 调试方法 性能优化 等等 当前移动设备的市场...layout viewport就是一个页面渲染之后具有固定大小的大框,跟之前提到PC上的概念相似,我们知道它的大小是由浏览器特性来决定的,PC端就是等于窗口大小,但在移动端不同浏览器的值不同,比如Safari...在上面那条标签,顾名思义width=device-width是将layout viewport的宽度设置为屏幕的宽度,但这里有些隐情就是比如当使用device-width时,Nexus One的正规宽度是..."> Call me 当用户将web应用添加到主屏幕时,这时候IOS可以提供配置应用图标的功能和启动图片的功能。

    1.1K10

    移动端web开发入门笔记

    移动端web app开发 简单来说就是开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。...由于本身没有深入移动端开发,但也可以预见一些移动端开发会碰到的问题: css与js跨平台的问题 h5及诸多新特性的使用 响应式布局及屏幕分辨率问题 native交互的使用 调试方法 性能优化 等等 当前移动设备的市场...layout viewport就是一个页面渲染之后具有固定大小的大框,跟之前提到PC上的概念相似,我们知道它的大小是由浏览器特性来决定的,PC端就是等于窗口大小,但在移动端不同浏览器的值不同,比如Safari...在上面那条标签,顾名思义width=device-width是将layout viewport的宽度设置为屏幕的宽度,但这里有些隐情就是比如当使用device-width时,Nexus One的正规宽度是..."> Call me 当用户将web应用添加到主屏幕时,这时候IOS可以提供配置应用图标的功能和启动图片的功能。

    1.7K90

    移动端H5坑位指南

    这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。 拨打电话给10086小姐姐 <!...唤醒原生应用的前提是必须在移动设备里安装了该应用,有些移动端浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在的危险行为而禁用它,像Safari和微信浏览器。...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示移动端浏览器上而使用了双击缩放。...移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟,后续又出现fastclick。...这种情况Safari上特别明显,简单概括就是往返页面无法刷新。 往返缓存指浏览器为了页面间执行前进后退操作时能拥有更流畅体验的一种策略,以下简称BFCache。

    3.4K10

    中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

    这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。 拨打电话给10086小姐姐 <!...唤醒原生应用的前提是必须在移动设备里安装了该应用,有些移动端浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在的危险行为而禁用它,像Safari和微信浏览器。...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示移动端浏览器上而使用了双击缩放。...移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟,后续又出现fastclick。...这种情况Safari上特别明显,简单概括就是往返页面无法刷新。 「往返缓存」指浏览器为了页面间执行前进后退操作时能拥有更流畅体验的一种策略,以下简称BFCache。

    4.3K22

    移动开发实用

    原因就出在浏览器需要如何判断快速点击上,当用户屏幕上单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...IOS safari下,大概为300毫秒。这就是延迟的由来。...个 高清显示屏的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍 那么,前端的应对方案是: 设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的...效果 移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下,...{ .css{} } audio元素和video元素ios和andriod无法自动播放 应对方案:触屏即播 $('html').one('touchstart',function(){

    6.5K30

    移动端web开发笔记

    5、 移动端手机号码识别(IOS) iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号的数字...像素点1个变为4个 高清显示屏的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍 那么,前端的应对方案是: 设计稿切出来的图片长宽保证为偶数,并使用backgroud-size...15、 移动端如何清除输入框内阴影 iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭: input, textarea {   border: 0...如果你不想用户可以选中页面的内容,那么你可以css禁掉: .user-select-none { -webkit-user-select: none; /* Chrome all / Safari...) { .css{} } 22、audio元素和video元素ios和andriod无法自动播放 应对方案:触屏即播 $('html').one('touchstart',function(

    3.6K20
    领券