阻止移动设备自动识别页面上的电话号码、email地址

本站所有文章均为博主人工写作,绝无AI辅助成分,请放心参阅。

这个问题主要发生在iOS的浏览器上,他们有时候会有一些“自作聪明”,自动把页面上的一串数字识别成电话号码,这样用户不小心点击这串数字,就拨号了。所以我们习惯给那些要在手机上访问的响应式页面增加一串meta标签,以阻止移动端浏览器的这些自动行为。

1
2
3
4
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="date=no" />

其实之所以iOS的浏览器会自动识别页面上的数字为电话号码,就是因为它默认的format-detection中有一条telephone=yes。人为把它设置成no就阻止了这个功能。那么在我们需要真的实现点击链接播电话的时候,只要在link上用标准的“tel:”写法就可以了:

1
<a href="tel:8602188888888">+86 021 88888888</a>

如此本文开头的其他几个例子就很好理解了,都是针对iOS(也不排除部分安卓浏览器)的。其中address=no,是防止地址跳转到地图;date=no是防止日期被显示成别的格式。这些浏览器自动产生的行为,可能会破坏页面原本布局,所以一律阻止掉它们。

如果你有兴趣看一下iOS关于link的文档,会发现还有一些稀奇古怪的扩展,点这里

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1246.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注