子比教程之检测苹果ua弹窗

前言

我发现有很多苹果用户访问我们的网站后下载apk文件来问为什么不能安装，每次都要解释一遍苹果只能用爱思助手，于是我用js css实现了用户访问网站时检测到苹果ua自动弹出提示。

把以下插入自定义代码中即可

/* 苹果设备提示弹窗 - 自定义CSS */
.apple-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    overflow: hidden;
    pointer-events: none;
}

.apple-alert.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.apple-alert-header {
    background: #1a73e8;
    color: white;
    padding: 22px 24px;
    display: flex;
    align-items: center;
}

.apple-alert-icon {
    font-size: 28px;
    margin-right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apple-alert-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.apple-alert-content {
    padding: 28px 24px 20px;
    color: #202124;
    line-height: 1.6;
}

.apple-alert-text {
    margin-bottom: 18px;
    font-size: 1.05rem;
}

.apple-alert-actions {
    display: flex;
    flex-direction: column;
    padding: 10px 16px 20px;
}

.apple-alert-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.015em;
    padding: 14px 16px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: #1a73e8;
    transition: background-color 0.2s;
    text-align: center;
    width: 100%;
    margin-bottom: 12px;
}

.apple-alert-btn:hover {
    background-color: rgba(26, 115, 232, 0.08);
}

.apple-alert-btn:active {
    background-color: rgba(26, 115, 232, 0.16);
}

.apple-alert-btn.primary {
    background-color: #1a73e8;
    color: white;
}

.apple-alert-btn.primary:hover {
    background-color: #0d62c9;
}

.apple-alert-dont-show {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: rgba(26, 115, 232, 0.05);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.apple-alert-dont-show input {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.apple-alert-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.apple-alert-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

// 苹果设备提示弹窗 - 自定义JS
document.addEventListener('DOMContentLoaded', function() {
    // 创建弹窗HTML结构
    const alertHTML = `
        <div class="apple-alert-backdrop" id="apple-alert-backdrop"></div>
        <div class="apple-alert" id="apple-alert">
            <div class="apple-alert-header">
                <div class="apple-alert-icon">⚠️</div>
                <div class="apple-alert-title">设备兼容性提示</div>
            </div>
            <div class="apple-alert-content">
                <p class="apple-alert-text">检测到您正在使用苹果设备（iPhone/iPad）。</p>
                <p class="apple-alert-text">请注意：本站内的部分资源可能不兼容苹果设备，APK安装包是安卓设备才可以安装!</p>
                <p class="apple-alert-text">苹果设备安装老版本需要使用电脑在手机上安装爱思助手后在爱思助手内下载!</p>
                
                <div class="apple-alert-dont-show">
                    <input type="checkbox" id="apple-alert-dont-show">
                    <label for="apple-alert-dont-show">不再显示此提示</label>
                </div>
            </div>
            <div class="apple-alert-actions">
                <button class="apple-alert-btn primary" id="apple-alert-confirm">知道了 (30分钟内不再提示)</button>
                <button class="apple-alert-btn" id="apple-alert-close">关闭</button>
            </div>
        </div>
    `;
    
    // 将弹窗添加到页面底部
    document.body.insertAdjacentHTML('beforeend', alertHTML);
    
    // 设备检测函数
    function isAppleDevice() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
    
    // 检查是否应该显示弹窗
    function shouldShowAlert() {
        // 检查永久不再提示
        if (localStorage.getItem('appleAlertPermanentDismiss') === 'true') {
            return false;
        }
        
        // 检查时间限制
        const lastDismissTime = localStorage.getItem('appleAlertDismissTime');
        if (lastDismissTime) {
            const currentTime = new Date().getTime();
            const thirtyMinutes = 30 * 60 * 1000; // 30分钟（毫秒）
            
            if (currentTime - parseInt(lastDismissTime) < thirtyMinutes) {
                return false;
            }
        }
        
        return true;
    }
    
    // 获取弹窗元素
    const alertEl = document.getElementById('apple-alert');
    const backdropEl = document.getElementById('apple-alert-backdrop');
    const confirmBtn = document.getElementById('apple-alert-confirm');
    const closeBtn = document.getElementById('apple-alert-close');
    const dontShowCheckbox = document.getElementById('apple-alert-dont-show');
    
    // 如果是苹果设备且应该显示弹窗，则显示
    if (isAppleDevice() && shouldShowAlert()) {
        // 延迟显示确保动画效果
        setTimeout(() => {
            backdropEl.classList.add('active');
            alertEl.classList.add('active');
            
            // 防止页面滚动
            document.body.style.overflow = 'hidden';
        }, 1000);
    }
    
    // 确认按钮点击事件
    confirmBtn.addEventListener('click', function() {
        // 如果用户选择了"不再显示"
        if (dontShowCheckbox.checked) {
            localStorage.setItem('appleAlertPermanentDismiss', 'true');
        } else {
            // 记录关闭时间
            localStorage.setItem('appleAlertDismissTime', new Date().getTime());
        }
        
        backdropEl.classList.remove('active');
        alertEl.classList.remove('active');
        
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    });
    
    // 关闭按钮点击事件
    closeBtn.addEventListener('click', function() {
        backdropEl.classList.remove('active');
        alertEl.classList.remove('active');
        
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    });
    
    // 点击遮罩层关闭弹窗
    backdropEl.addEventListener('click', function() {
        backdropEl.classList.remove('active');
        alertEl.classList.remove('active');
        
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    });
});