(function() { // 检测浏览器是否支持oklch颜色函数 function supportsOklch() { try { return CSS.supports('color', 'oklch(50% 0.1 180)'); } catch (e) { return false; } } // 检测浏览器是否支持background-clip: text function supportsBackgroundClipText() { try { return CSS.supports('-webkit-background-clip', 'text') || CSS.supports('background-clip', 'text'); } catch (e) { return false; } } // 检测浏览器版本 function getBrowserInfo() { const userAgent = navigator.userAgent; let name = 'Unknown'; let version = 0; if (userAgent.includes('Chrome')) { name = 'Chrome'; const match = userAgent.match(/Chrome\/(\d+)/); version = match ? parseInt(match[1]) : 0; } else if (userAgent.includes('Firefox')) { name = 'Firefox'; const match = userAgent.match(/Firefox\/(\d+)/); version = match ? parseInt(match[1]) : 0; } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) { name = 'Safari'; const match = userAgent.match(/Version\/(\d+)/); version = match ? parseInt(match[1]) : 0; } return { name, version }; } // 应用兼容性修复 function applyFixes() { const browserInfo = getBrowserInfo(); const supportsGradientText = supportsBackgroundClipText(); const needsFix = !supportsOklch() || !supportsGradientText || (browserInfo.name === 'Chrome' && browserInfo.version < 88) || (browserInfo.name === 'Firefox' && browserInfo.version < 113) || (browserInfo.name === 'Safari' && browserInfo.version < 16); if (needsFix) { console.log('检测到需要浏览器兼容性修复，浏览器:', browserInfo); console.log('渐变文字支持:', supportsGradientText); // 加载兼容性CSS const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/legacy-browser-fixes.css'; document.head.appendChild(link); // 特殊处理渐变文字 if (!supportsGradientText) { // 为不支持渐变文字的浏览器添加内联样式 const gradientTextStyle = document.createElement('style'); gradientTextStyle.textContent = ` .gradient-text { background: none !important; color: #3b82f6 !important; animation: none !important; font-weight: bold !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; } `; document.head.appendChild(gradientTextStyle); } // 如果是非常老的浏览器，显示警告 if ((browserInfo.name === 'Chrome' && browserInfo.version < 70) || (browserInfo.name === 'Firefox' && browserInfo.version < 70) || (browserInfo.name === 'Safari' && browserInfo.version < 13)) { const warning = document.createElement('div'); warning.style.cssText = 'position:fixed;top:0;left:0;right:0;background-color:#fbbf24;color:#92400e;padding:8px 16px;text-align:center;font-size:14px;z-index:9999;border-bottom:1px solid #f59e0b;'; warning.innerHTML = '浏览器兼容性提示：您正在使用较旧版本的' + browserInfo.name + '浏览器，可能会影响页面显示效果。建议升级到最新版本以获得最佳体验。'; document.body.insertBefore(warning, document.body.firstChild); } } } // 页面加载完成后执行 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', applyFixes); } else { applyFixes(); } })();