iOS Chrome自动为手机号和邮箱加下划线并设可点击问题求助

针对iOS Chrome中div内手机号、邮箱被自动转为可点击链接，且常规CSS和Safari专属meta标签无效的问题，提供以下几种可行方案：

• 用数据属性+伪元素渲染内容
  把需要隐藏的号码/邮箱放在data-*属性中，通过CSS伪元素渲染到页面，绕过浏览器的自动识别机制：

  <div class="non-clickable" data-contact="13800138000"></div>
  

  .non-clickable:before {
    content: attr(data-contact);
  }
  

• 插入零宽空格打断识别
  在号码或邮箱字符之间插入零宽空格​，浏览器无法识别为完整的联系方式，同时用户视觉上无感知：

  <div>138&#8203;0013&#8203;8000</div>
  <div>test&#8203;@example.com</div>
  

• 强制覆盖自动生成的链接样式
  iOS Chrome会将识别到的内容自动包裹为<a>标签，可直接针对这类链接强制修改样式并禁用点击：

  /* 针对手机号链接 */
  div a[href^="tel:"] {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: none !important;
  }
  /* 针对邮箱链接 */
  div a[href^="mailto:"] {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: none !important;
  }
  

  pointer-events: none会直接禁用链接的点击行为，彻底阻止跳转。

• 禁用目标元素的点击事件
  给包含联系方式的div添加类，直接禁用点击，同时保留文本可选：

  .no-auto-link {
    pointer-events: none;
    user-select: text;
  }
  

  <div class="no-auto-link">13800138000</div>
  

内容的提问来源于stack exchange，提问作者너구리