检测Android/iPhone设备并展示对应内容的代码故障求助

嘿，我帮你看看这个问题！你想根据访客是iPhone还是Android设备来显示对应内容，但代码没跑起来对吧？我先帮你排查下可能的坑，再给你个靠谱的解决方案。

原代码可能踩的坑 #

1. 没引入jQuery库：你的代码用了$符号，但如果页面里没加载jQuery，浏览器会直接报错，代码自然不会执行。这是最常见的问题！
2. User-Agent匹配不够严谨：原代码用match()匹配UA，但有些设备的UA可能有大小写差异，或者变种写法，容易漏匹配。
3. 逻辑不够完整：原代码是两个独立的if，如果有设备同时匹配到两种UA（虽然很少见，但不排除），会执行两次隐藏操作；而且没处理非目标设备的情况。

修正后的完整实现方案 #

首先，一定要先引入jQuery，把这段代码放在你的HTML里（建议放在<body>标签的末尾，或者<head>里加defer属性）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后是你的HTML结构（保持不变即可）：

<p class="iphone">iPhone专属链接/内容</p>
<p class="android">Android专属链接/内容</p>

接下来是改进后的JavaScript代码：

$(document).ready(function() {
    // 先把User-Agent转成小写，避免大小写匹配问题
    const userAgent = navigator.userAgent.toLowerCase();
    
    // 简化设备判断逻辑，用includes更直观
    const isIphoneOrIpad = userAgent.includes('iphone') || userAgent.includes('ipad');
    const isAndroid = userAgent.includes('android');
    
    // 根据设备类型切换显示状态
    if (isIphoneOrIpad) {
        $('.android').hide();
        $('.iphone').show(); // 主动确保显示，避免CSS默认隐藏的情况
    } else if (isAndroid) {
        $('.iphone').hide();
        $('.android').show();
    } else {
        // 非手机设备（比如桌面端）的处理，按需调整：要么都隐藏，要么都显示
        $('.iphone, .android').hide();
        // 要是想给桌面端也显示内容，可以改成 $('.iphone, .android').show();
    }
});

为什么这么改？ #

• 转小写匹配：避免因为UA里的大小写（比如IPhone、Android13）导致匹配失败；
• 用includes()替代match()：对于简单的字符串匹配，includes()比正则更直观，性能也更好；
• 增加show()方法：防止你的CSS里默认把这些元素隐藏了，确保目标设备能看到对应内容；
• 用else if优化逻辑：避免两次if都执行的情况，逻辑更清晰；
• 补充非目标设备分支：让代码更健壮，处理桌面端或其他设备的情况。

测试小技巧 #

你可以用浏览器的开发者工具来测试：比如Chrome的DevTools里打开「设备工具栏」，选择iPhone或Android设备，刷新页面就能看到效果啦！

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