如何检测网站访问设备类型并展示对应内容？需HTML/JS示例

直接用JavaScript读取浏览器的User Agent就能搞定这个需求——检测到是移动设备时显示提示文本，桌面设备则展示正常内容。

完整代码示例 #

<!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>
        .mobile-warning {
            display: none;
            text-align: center;
            padding: 2rem;
            font-size: 1.2rem;
            color: #333;
        }
        .desktop-content {
            padding: 2rem;
        }
    </style>
</head>
<body>
    <!-- 移动端提示容器 -->
    <div class="mobile-warning">please visit from desktop</div>
    
    <!-- 桌面端正常内容 -->
    <div class="desktop-content">
        <h1>桌面端专属内容</h1>
        <p>这里是只有桌面访问才能看到的正常页面内容</p>
    </div>

    <script>
        // 检测是否为移动设备的函数
        function isMobileDevice() {
            // 匹配常见移动设备的User Agent关键词
            const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
            return mobileRegex.test(navigator.userAgent);
        }

        // 页面加载完成后执行检测
        window.addEventListener('load', function() {
            const mobileWarning = document.querySelector('.mobile-warning');
            const desktopContent = document.querySelector('.desktop-content');

            if (isMobileDevice()) {
                mobileWarning.style.display = 'block';
                desktopContent.style.display = 'none';
            } else {
                mobileWarning.style.display = 'none';
                desktopContent.style.display = 'block';
            }
        });
    </script>
</body>
</html>

关键说明 #

• User Agent检测逻辑：通过正则匹配navigator.userAgent里的移动设备关键词，覆盖了大部分主流手机、平板设备
• DOM切换：页面加载后根据检测结果，通过修改display属性控制两个容器的显示/隐藏
• 适配注意：如果需要区分iPad（部分iPad的UA会模拟桌面端），可以单独添加iPad的检测规则，或者结合屏幕宽度判断（不过UA方法是最直接的）

内容的提问来源于stack exchange，提问作者q2000 official