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

问题形容

问题来自用户的一个反馈，留神到底部手机号款式换行了。

右边是安卓自带浏览器，左边是 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>

解决办法

能够通过勾销手机号检测来实现，这样用户就无奈一键拨打。

<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/l…