HTML页面在iPhone中电话号码自动检测带来的布局问题

2024-06-03 06:36:12

问题描述

问题来自用户的一个反馈，注意到底部手机号样式换行了。

左边是安卓自带浏览器，右边是iPhone自带浏览器。

查看样式出现问题的相关代码如下所示，目测看起来没任何问题

<div class="tw-py-1"><i class="iconfont icon-phone tw-inline-block tw-w-4"></i>021-88888888
</div>

实测发现在 iPhone 中手机号码变为一键可点击拨打，猜测问题是出在了这里。

通过翻阅相关资料，查找到苹果对于HTML页面的解析有如下解释：

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

也就是Safari手机浏览器会自动对页面手机号进行检测，并自动加上标签生成一个可直接拨打的标签，正好我们的布局中手机号未使用标签包裹，浏览器自动加入a标签后导致了布局错乱。

<div class="tw-py-1"><i class="iconfont icon-phone tw-inline-block tw-w-4"></i><a href="tel:021-88888888">021-88888888</a>
</div>

Copy

解决办法

可以通过取消手机号检测来实现，这样用户就无法一键拨打。

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

或者使用标签预包裹类似手机号的字符串，避免自动识别后样式错乱。

<div class="tw-py-1"><i class="iconfont icon-phone tw-inline-block tw-w-4"></i><span class="tw-inline-block">021-88888888</span>
</div>

或者主动加上a标签，避免浏览器重复生成，这样也方便用户使用。

<div class="tw-py-1"><i class="iconfont icon-phone tw-inline-block tw-w-4"></i><a href="tel:021-88888888">021-88888888</a>
</div>

同样的道理对于邮箱、地址，Safari还有会类似的操作，之后的页面布局可以避免踩坑。

更多可参考：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

HTML页面在iPhone中电话号码自动检测带来的布局问题相关推荐

php中定时刷新当前页面,php中怎么自动刷新页面
php中自动刷新页面的方法:1.使用header()函数来实现自动刷新页面:2.在PHP脚本中嵌入JS代码,通过JS代码来实现自动刷新页面. php中怎么自动刷新页面? 1.使用header()函数来 ...
008CHB-MIT脑电图数据库对儿童癫痫发作自动检测的调查-2021
Automated Epileptic Seizure Detection in Pediatric Subjects of CHB-MIT EEG Database-A Survey 本文通过分析脑 ...
自动阈值检测_金融科技讲堂之三｜金融企业如何在大数据中进行异常检测（一）...
作者| 边际实验室异常检测是当今金融企业的当务之急,但在内部设计和构建一个真正有效的监测预警系统是一项复杂的任务. 对于金融企业的数据业务来说,对市场数据.客户交易数据.营销数据等进行分析,并寻找可 ...
.NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析
.NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析 .NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析作者:&;nbsp来自:网络 htt ...
java 系统自动检测_如何在Java中检测OS（操作系统）名称？
java 系统自动检测 To detect the OS (operating system) name in Java, we use the getProperties() method, whi ...
嵌入式设备和固件中的自动漏洞检测（一）：概览
原文链接:Automatic Vulnerability Detection in Embedded Devices and Firmware: Survey and Layered Taxonomi ...
嵌入式设备和固件中的自动漏洞检测（二）：动态分析与符号执行技术
原文链接:Automatic Vulnerability Detection in Embedded Devices and Firmware: Survey and Layered Taxonomi ...
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程目录解决问题解决方法解决问题 wps文档中输入英文单词出现对应英文单词下边红色波浪线解决方 ...
自动驾驶中激光雷达如何检测障碍物
自动驾驶中激光雷达如何检测障碍物 1. 介绍 1.1 激光雷达-一种三维激光传感器 1.2 激光雷达的优缺点? 1.3 基于激光雷达如何进行障碍物检测? 1.4 点云处理难点 2. 点云处理 2.1 ...
大牛讲堂 | 山世光博士：自动驾驶系统中的目标检测技术
雷锋网按:作者山世光博士,中科院计算所研究员.博导,主要从事计算机视觉.模式识别.机器学习等相关研究工作.迄今已发表CCF A类论文50余篇,全部论文被Google Scholar引用9000余次.现 ...

最新文章

热门文章