HTML页面iPhone自动检测电话号码导致的排版问题
时间：2023-04-05 21:00:28
HTML5
问题描述该问题来自用户反馈，发现底部的电话号码样式发生了变化。左边是Android自带的浏览器，右边是iPhone自带的浏览器。检查样式问题的相关代码如下，目测好像没有什么问题021-88888888
实测发现iPhone里面的手机号码变成了一键拨号，估计问题就出在这里。通过浏览相关资料，我发现Apple对HTML页面的分析有如下解释：默认情况下，iOS上的Safari会检测任何格式类似于电话号码的字符串，并将其作为调用该号码的链接。指定telephone=no禁用此功能。也就是Safari手机浏览器会自动检测页面中的手机号码，并自动添加标签，生成可以直接拨打的标签。恰好我们布局中的手机号没有被标签包裹，浏览器自动添加了a标签，导致布局混乱。.
021-88888888 解决办法可以通过取消手机号码检测来实现，这样用户就不能一键拨号了。
或者使用标签对类似于手机号码的字符串进行预包装，避免自动识别后出现样式混淆。
021-88888888 