如何通过 JavaScript 检测并仅允许 iOS 设备访问网站-html教程-PHP中文网

如何通过 JavaScript 检测并仅允许 iOS 设备访问网站

本文介绍如何使用 javascript 精准识别 ios 设备（包括 iphone、ipad 和 ipod touch），实现访问拦截与友好提示，并简要说明免费开发 ios 原生应用的可行路径与关键限制。

本文介绍如何使用 javascript 精准识别 ios 设备（包括 iphone、ipad 和 ipod touch），实现访问拦截与友好提示，并简要说明免费开发 ios 原生应用的可行路径与关键限制。

在 Web 开发中，有时需基于用户设备操作系统提供差异化体验，甚至严格限制访问权限（例如仅面向 iOS 用户的内部工具、演示站或配套服务）。但需注意：纯前端检测存在局限性，不可用于安全敏感场景（如身份认证或权限控制），仅适用于用户体验层面的引导与提示。

✅ 正确识别 iOS 设备的 JavaScript 方法

navigator.appVersion 已被广泛弃用且不可靠（如 macOS Safari 17+ 中可能不包含 "Mac" 字符串），更准确的方式是结合 navigator.userAgent 和 navigator.platform 进行综合判断：

function isIOS() {
  const ua = window.navigator.userAgent;
  const platform = window.navigator.platform;
  const iosRegex = /iPad|iPhone|iPod/.test(ua) || 
                   (platform === 'MacIntel' && navigator.standalone); // 支持 PWA 独立模式
  return iosRegex && !/Mac OS X.*Safari/.test(ua) && !/CriOS|FxiOS|OPiOS/.test(ua);
}

// 使用示例
if (!isIOS()) {
  document.body.innerHTML = `
    <div style="text-align:center; padding:40px; font-family:sans-serif;">
      <h2>⚠️ 本服务仅限 iOS 设备访问</h2>
      <p>您当前使用的是 ${navigator.userAgent.substring(0, 50)}...</p>
      <p>Android 用户请下载：<a href="https://example.com/android-app">安卓版应用</a></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img
														src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a>
													<p class="overflowclass">审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      <p>Windows/macOS 用户请访问：<a href="https://example.com/web">通用网页版</a></p>
    </div>
  `;
  // 可选：阻止进一步交互
  document.documentElement.style.pointerEvents = 'none';
}

? 为什么不用 appVersion？
appVersion 是历史遗留字段，内容不稳定（如 Chrome 会伪造其值），而 userAgent 在现代浏览器中仍保持较高兼容性（尽管也存在 UA 减少趋势）。iOS 的可靠标识是 iPad/iPhone/iPod 字符串，配合 platform === 'MacIntel' 可覆盖 iPadOS（因 iPadOS 报告为 MacIntel）。

⚠️ 重要注意事项

无法 100% 防止绕过：用户可轻松修改 UA（开发者工具 → Network Conditions → User Agent），因此该逻辑仅用于体验优化，绝不可替代后端校验。
隐私与合规：部分地区（如欧盟 GDPR）要求明确告知用户设备信息采集目的；若结合其他追踪行为，需获得用户同意。
Safari 特殊情况：iOS 上所有第三方浏览器（Chrome、Firefox）均强制使用 WebKit 引擎，因此 UA 中仍含 iPhone 或 iPad，上述函数可正确识别。
iPadOS 识别：自 iPadOS 13 起，iPad 默认 UA 不再包含 iPad，但通常保留 MacIntel + Mobile，建议补充判断：
```
const isIPadOS = /MacIntel/.test(platform) && /Mobile/.test(ua) && !/Safari/.test(ua);
```

? 关于免费开发 iOS 原生应用

是的，你可以免费开发 iOS 应用（使用 Swift + Xcode），Xcode 是 Apple 官方 IDE，完全免费，支持模拟器调试、代码编译和基础测试。但需注意关键前提：

✅ 开发免费：Xcode（macOS 专属）、Swift 语言、iOS SDK 全部免费；
❌ 上架收费：提交至 App Store 必须加入 Apple Developer Program，年费 99 美元（约 ¥720），且需通过苹果审核；
⚠️ 真机调试限制：未付费账户可在模拟器运行，但连接真实 iOS 设备调试需付费加入计划（Xcode 会提示“Unable to install”）；
? 替代方案：React Native 或 Flutter 可跨平台开发，但最终 iOS 构建与发布仍需 Apple 开发者账号。