iOS与Mac设备下Div显示/隐藏功能异常求助

我开发网站时，希望只在iOS和Mac设备上显示iMessage相关图片，已经把目标div设为display:none，参考Stack Overflow写的代码却无法正常运行，执行iosMacDiv.style.display = 'none'时出问题，附上代码求助排查原因：

<script type="text/javascript">
  // Function to check if the user is using iOS or macOS
  function isIOSorMac() {
    return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel' || navigator.platform === 'MacPPC';
  }

  // Function to show or hide the div based on the device
  function showOrHideDiv() {
    var iosMacDiv = document.getElementById('ios-message');

    if (isIOSorMac()) {
      iosMacDiv.style.display = 'block';
    } else {
      iosMacDiv.style.display = 'none';
    }
  }
</script>

可能的问题原因及解决办法 #

• 函数未触发执行：你定义了showOrHideDiv函数，但没有在页面加载时调用它。浏览器不会自动执行这个函数，必须手动触发。可以在脚本末尾添加：

  // DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', showOrHideDiv);
  

  或者直接把函数绑定到window.onload事件上。

• 元素获取失败：如果document.getElementById('ios-message')返回null，操作它的style属性就会抛出错误。检查：

  • 目标div的id是不是准确的ios-message，有没有拼写错误；
  • 脚本执行时机是不是早于DOM加载完成，导致元素还没被渲染出来（用上面的DOMContentLoaded事件可以解决这个问题）。

• 设备检测逻辑存在漏洞：

  • 新版iOS（尤其是iPadOS）的Safari会伪装成Mac的userAgent，单纯用/iPad|iPhone|iPod/.test(navigator.userAgent)可能检测不到iPad；
  • MacPPC是早已淘汰的硬件平台，完全可以从判断条件中移除。
    修正后的检测函数可以改成：

  function isIOSorMac() {
    // 检测iPhone/iPod
    const isIOS = /iPhone|iPod/.test(navigator.userAgent);
    // 检测iPadOS（通过触摸点数+平台判断）
    const isiPadOS = navigator.maxTouchPoints > 1 && /MacIntel/.test(navigator.platform);
    // 检测Mac桌面设备
    const isMac = /MacIntel/.test(navigator.platform) && navigator.maxTouchPoints <= 1;
    return isIOS || isiPadOS || isMac;
  }
  

• 样式优先级冲突：如果目标div通过CSS类设置了display样式，直接修改style.display可能被CSS类的样式覆盖。这种情况下建议用类切换的方式：
  先定义CSS类：

  .hidden { display: none; }
  

  然后修改函数：

  function showOrHideDiv() {
    const iosMacDiv = document.getElementById('ios-message');
    if (!iosMacDiv) return;
    iosMacDiv.classList.toggle('hidden', !isIOSorMac());
  }
  

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