当前位置：首页 > news >正文

在JavaScript / HTML中，浏览器中如何使用js判断是否为苹果平台

news 2025/10/17 9:52:45

苹果平台检测器

下面是一个简洁的JavaScript函数，可以检测当前是否为苹果平台，并提供一个直观的演示界面：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>苹果平台检测器</title><style>body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);margin: 0;padding: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;color: #333;}.container {background: white;border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;max-width: 500px;width: 90%;text-align: center;}h1 {color: #333;margin-bottom: 10px;}.subtitle {color: #666;margin-bottom: 30px;}.result {font-size: 1.5rem;font-weight: 600;padding: 20px;border-radius: 12px;margin: 25px 0;transition: all 0.3s ease;}.is-apple {background: #e8f5e9;color: #2e7d32;border: 2px solid #4caf50;}.not-apple {background: #ffebee;color: #c62828;border: 2px solid #f44336;}.code-container {background: #2d2d2d;color: #f8f8f2;padding: 20px;border-radius: 8px;text-align: left;margin: 20px 0;overflow-x: auto;font-family: 'Courier New', monospace;}.info {background: #e3f2fd;padding: 15px;border-radius: 8px;margin-top: 20px;text-align: left;font-size: 0.9rem;}.device-icon {font-size: 4rem;margin: 20px 0;}</style>
</head>
<body><div class="container"><h1>苹果平台检测器</h1><p class="subtitle">检测当前浏览器是否运行在苹果设备上</p><div class="device-icon" id="device-icon">📱</div><div id="result" class="result">检测中...</div><div class="code-container">
// 检测是否为苹果平台的函数
function isApplePlatform() {const platform = navigator.platform.toLowerCase();const userAgent = navigator.userAgent.toLowerCase();// 检测平台标识if (platform.includes('mac') || platform.includes('iphone') || platform.includes('ipad') || platform.includes('ipod')) {return true;}// 检测用户代理字符串if (userAgent.includes('mac os') || userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod')) {return true;}return false;
}</div><div class="info"><p><strong>检测原理：</strong>通过检查 navigator.platform 和 navigator.userAgent 是否包含苹果设备的关键词。</p><p><strong>支持的设备：</strong>Mac、iPhone、iPad、iPod</p></div></div><script>// 检测是否为苹果平台的函数function isApplePlatform() {const platform = navigator.platform.toLowerCase();const userAgent = navigator.userAgent.toLowerCase();// 检测平台标识if (platform.includes('mac') || platform.includes('iphone') || platform.includes('ipad') || platform.includes('ipod')) {return true;}// 检测用户代理字符串if (userAgent.includes('mac os') || userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod')) {return true;}return false;}// 更新页面显示结果function updateResult() {const resultElement = document.getElementById('result');const iconElement = document.getElementById('device-icon');const isApple = isApplePlatform();if (isApple) {resultElement.textContent = "✅ 当前设备是苹果平台";resultElement.className = "result is-apple";iconElement.textContent = "🍎";} else {resultElement.textContent = "❌ 当前设备不是苹果平台";resultElement.className = "result not-apple";iconElement.textContent = "💻";}}// 页面加载完成后更新结果document.addEventListener('DOMContentLoaded', updateResult);</script>
</body>
</html>