如何实现网站设备检测并根据设备类型切换展示内容？

给你几种实用的实现方案，按需选择：

一、前端JavaScript检测（客户端直接判断，最常用） #

这种方式在页面加载后直接在浏览器端判断设备类型，灵活且无需后端改动。

实现步骤： #

1. 准备HTML结构，分别放置正常内容和移动设备提示：

<div id="normal-content">
    <!-- 你的网站正常内容 -->
    这里是桌面设备展示的内容
</div>
<div id="mobile-prompt" style="display: none;">
    please visit from desktop
</div>

2. 编写JS检测逻辑，结合User-Agent和屏幕尺寸双重判断：

// 判断是否为移动设备的函数
function isMobile() {
    // 通过User-Agent识别常见移动设备
    const uaMatch = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    // 结合屏幕宽度判断（可根据需求调整阈值，比如768px是平板/手机的常见分界）
    const screenMatch = window.innerWidth <= 768;
    return uaMatch || screenMatch;
}

// 页面加载完成后执行检测
document.addEventListener('DOMContentLoaded', () => {
    const normalContent = document.getElementById('normal-content');
    const mobilePrompt = document.getElementById('mobile-prompt');

    if (isMobile()) {
        normalContent.style.display = 'none';
        mobilePrompt.style.display = 'block';
    }
});

优点：实现简单，无需后端支持；缺点：若用户禁用JS则失效，且User-Agent可能被篡改。

二、纯CSS媒体查询实现（无JS依赖） #

如果不需要复杂的设备识别，仅通过屏幕尺寸区分，用CSS就能搞定。

实现代码： #

/* 默认状态：显示正常内容，隐藏提示 */
#normal-content {
    display: block;
}
#mobile-prompt {
    display: none;
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
    color: #333;
}

/* 当屏幕宽度小于等于768px时，切换显示状态 */
@media only screen and (max-width: 768px) {
    #normal-content {
        display: none;
    }
    #mobile-prompt {
        display: block;
    }
}

对应的HTML结构和上面JS方案一致即可。

优点：完全无JS依赖，性能好；缺点：仅基于屏幕尺寸，无法区分小屏桌面设备和移动设备。

三、后端服务器端检测（精准度更高） #

如果需要在页面加载前就决定返回的内容（比如避免前端切换的闪烁，或适配SEO），可以在后端解析请求头的User-Agent来判断设备。

几种常见后端语言的示例： #

Node.js/Express：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    const userAgent = req.headers['user-agent'];
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
    
    if (isMobile) {
        res.send('<h1 style="text-align:center; margin-top:2rem;">please visit from desktop</h1>');
    } else {
        // 这里可以渲染正常的页面模板，比如用res.render('index')
        res.send('<h1 style="text-align:center; margin-top:2rem;">桌面设备的正常内容</h1>');
    }
});

app.listen(3000, () => console.log('Server running on port 3000'));

PHP：

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isMobile = preg_match('/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i', $userAgent);

if ($isMobile) {
    echo '<h1 style="text-align:center; margin-top:2rem;">please visit from desktop</h1>';
} else {
    echo '<h1 style="text-align:center; margin-top:2rem;">桌面设备的正常内容</h1>';
}
?>

优点：页面加载前就完成判断，无闪烁，更精准；缺点：需要后端开发能力，对静态站点不太友好。

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