如何在mobile viewport下为自定义PHP CRM添加禁用操作Overlay？

阿华AIGC实验室

2026-5-19

实现CRM移动端访问限制的Overlay遮罩方案

没问题，虽然移动优先是现代网页设计的主流，但既然是客户明确要求，咱们可以通过前端设备检测+全屏遮罩层的方式来实现需求——在移动端尺寸（或非iPad/桌面设备）下禁用用户操作并显示提示文本。下面是具体的实现步骤和代码示例：

1. 核心思路

我们需要完成三个关键动作：

准确识别需要限制的设备/视口尺寸（排除iPad和桌面端）
创建一个全屏的Overlay遮罩层，覆盖所有页面内容
在符合限制条件时显示遮罩层，禁用页面交互；不符合时隐藏

2. 具体实现代码

2.1 添加Overlay HTML元素

在你的CRM页面的</body>标签前插入以下代码，作为遮罩层的基础结构：

<div id="mobile-restriction-overlay" style="display: none;">
    <div class="overlay-content">
        <h3>抱歉，此CRM仅支持iPad或桌面端访问</h3>
        <p>请使用更大尺寸的设备登录系统</p>
    </div>
</div>

2.2 编写遮罩层CSS样式

在你的全局CSS文件中添加以下样式，确保遮罩层全屏覆盖、居中显示提示文本，并且层级足够高：

#mobile-restriction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999; /* 确保覆盖所有页面元素 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-content {
    color: #fff;
    text-align: center;
    padding: 2rem;
    background-color: #222;
    border-radius: 8px;
    max-width: 90%;
}

.overlay-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

2.3 JavaScript检测与控制逻辑

编写JS函数来检测设备类型和视口尺寸，并控制遮罩层的显示/隐藏。同时监听窗口resize事件，确保视口切换时能及时响应：

// 检测是否为需要限制的移动端设备（排除iPad和桌面）
function isRestrictedMobileDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    // 检测是否为移动设备（不包含iPad）
    const isMobile = /android|webos|iphone|ipod|blackberry|iemobile|opera mini/.test(userAgent);
    // 检测是否为iPad（包括iPadOS的桌面UA）
    const isiPad = /ipad/.test(userAgent) || (userAgent.includes('macintosh') && navigator.maxTouchPoints > 1);
    
    // 额外检测视口宽度（防止桌面端缩小窗口触发）
    const viewportWidth = window.innerWidth;
    const isMobileViewport = viewportWidth < 768; // 可根据你的需求调整阈值

    // 满足：是移动设备且不是iPad，或者视口宽度小于指定值且不是iPad
    return (isMobile && !isiPad) || (isMobileViewport && !isiPad);
}

// 控制遮罩层显示/隐藏的函数
function toggleRestrictionOverlay() {
    const overlay = document.getElementById('mobile-restriction-overlay');
    if (isRestrictedMobileDevice()) {
        overlay.style.display = 'flex';
        // 可选：禁用页面滚动
        document.body.style.overflow = 'hidden';
    } else {
        overlay.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
}

// 页面加载时执行检测
window.addEventListener('load', toggleRestrictionOverlay);
// 窗口大小改变时重新检测
window.addEventListener('resize', toggleRestrictionOverlay);

2.4 可选：PHP端辅助检测（防止用户禁用JS）

如果担心用户禁用JavaScript绕过限制，可以在PHP端通过User-Agent头做一层辅助检测，直接输出遮罩层或提示：

<?php
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
$isRestricted = false;

// 检测移动设备（排除iPad）
$isMobile = preg_match('/android|webos|iphone|ipod|blackberry|iemobile|opera mini/', $userAgent);
$isiPad = preg_match('/ipad/', $userAgent) || (strpos($userAgent, 'macintosh') !== false && isset($_SERVER['HTTP_SEC_CH_UA_MOBILE']) && $_SERVER['HTTP_SEC_CH_UA_MOBILE'] == '?0');

if ($isMobile && !$isiPad) {
    $isRestricted = true;
}
?>

<?php if ($isRestricted): ?>
<style>
    /* 这里可以重复遮罩层的CSS，确保无JS时也能显示 */
    #mobile-restriction-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .overlay-content {
        color: #fff;
        text-align: center;
        padding: 2rem;
        background-color: #222;
        border-radius: 8px;
        max-width: 90%;
    }
</style>
<div id="mobile-restriction-overlay">
    <div class="overlay-content">
        <h3>抱歉，此CRM仅支持iPad或桌面端访问</h3>
        <p>请使用更大尺寸的设备登录系统</p>
    </div>
</div>
<?php endif; ?>