实现移动设备文本大小调整的JS代码失效，请求排查问题

嘿，我来帮你排查这个文本大小自动调整的问题～先看你的代码，咱们一步步拆解可能的问题：

1. 首先检查逻辑是否搞反了！ #

你的需求是用户使用移动设备时自动调整文本大小，但你的代码里用了!取反——也就是只有非移动设备时才会把字体设为120%，这完全和需求反过来了！这大概率是最核心的问题。如果要实现移动设备调整，应该去掉那个感叹号：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { 
  document.getElementById("link").style.fontSize = "120%"; 
}

另外注意你原来的正则里 Opera Mini前面多了个空格，可能会漏匹配，建议去掉空格。

2. 确认元素是否存在，代码执行时机是否正确 #

如果页面上没有id为link的元素，或者代码在元素加载完成前就执行了，document.getElementById("link")会返回null，自然无法设置样式。解决方法是把代码放在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.getElementById("link");
  // 先判断元素是否存在，避免报错
  if (!targetElement) return;

  // 这里写你的UA判断逻辑
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { 
    targetElement.style.fontSize = "120%"; 
  }
});

3. 检查样式是否被优先级更高的规则覆盖 #

就算你用JS设置了行内样式，也可能被CSS里的!important或者更具体的选择器（比如.container #link）覆盖。你可以打开浏览器开发者工具（F12），选中link元素，查看font-size样式是否被划掉：

• 如果是被覆盖，可以调整CSS选择器的优先级，或者在JS里强制设置（不推荐，但应急可用）：

targetElement.style.setProperty('font-size', '120%', 'important');

4. 优化User-Agent检测的准确性 #

现在很多移动设备的UA可能包含Mobile关键词，你的正则里没覆盖到，比如Chrome移动端的UA会有Mobile字样。可以把正则更新一下，提升覆盖范围：

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini|Mobile/i.test(navigator.userAgent);

先从逻辑是否搞反这个点排查，这是最容易忽略的问题，然后再依次检查其他项，应该就能解决啦！

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