如何阻止Chrome移动版自动检测电话号码？

问题背景 #

纯数字文本（如6132905676）在Chrome移动版中被自动识别为电话号码，生成chrome_annotation包裹标签；已通过<meta name="format-detection" content="telephone=no">解决Safari同类问题，但Chrome未生效。

1. 阻止Chrome移动版自动检测电话号码的方法 #

• 优化meta标签位置：将<meta name="format-detection" content="telephone=no">放在HTML<head>最顶部，避免被其他标签或资源加载顺序干扰。
• 拆分数字结构：用<span>分隔数字，打断浏览器对完整电话号码的识别，示例：

  <h1 class="referral-code-text" id="referral_code">
    <span>6132</span>905676
  </h1>
  

• 软连字符拆分：插入HTML软连字符­分隔数字，示例：

  <h1 class="referral-code-text" id="referral_code">
    6132&shy;905676
  </h1>
  

• 禁用元素交互：给目标元素添加CSS样式，即使识别为号码也无法触发链接行为：

  .referral-code-text {
    pointer-events: none;
  }
  

2. 阻止chrome_annotation标签自动生成的方法 #

chrome_annotation是Chrome检测到电话号码后自动注入的标签，核心是从根源阻止号码识别，上述第1部分的前3种方法均能有效阻止该标签生成。若仍有问题，可尝试：

• 页面加载后通过JavaScript重新赋值文本，示例：

  window.addEventListener('load', function() {
    const codeEl = document.getElementById('referral_code');
    codeEl.textContent = codeEl.textContent.trim();
  });
  

内容的提问来源于stack exchange，提问作者evasyuk